מדריך זה יגדיר את ההליך להוספת אפשרות מטקסט קלט לתג בחירה באמצעות JavaScript.
כיצד להוסיף אפשרות לבחירת תג מטקסט קלט באמצעות JavaScript?
כדי להוסיף אפשרות מטקסט קלט לתג בחירה באמצעות JavaScript, אתה יכול להשתמש בשיטות שונות, כגון:
בואו נחקור כל שיטה אחת אחת!
שיטה 1: הוסף אפשרות לבחירת תג מטקסט קלט באמצעות שיטת add() עם Option Constructor
להוספת אפשרות מטקסט הקלט בתגית בחירה, השתמש ב-' לְהוֹסִיף() 'שיטה עם ' אוֹפְּצִיָה 'קונסטרוקטור. השיטה add() משמשת להוספת האלמנטים לאפשרויות של ' HTMLSelectElement ” המכונה גם תג
תחביר
עקוב אחר התחביר שסופק כדי להשתמש בשיטת add() להוספת אפשרות בתג select:
לְהוֹסִיף ( אפשרות, קיימת אפשרות ) ;הנה ה ' אוֹפְּצִיָה ' מייצג את האפשרות החדשה שעומדת להתווסף במקום ' קיימת אפשרות '.
דוגמא
ניצור שדה קלט, תפריט נפתח באמצעות <בחר> תג וכפתור שיוסיפו אפשרויות חדשות באלמנט בחירה, תוך הפעלת ה-' insertOption() ' פונקציה כאשר לוחצים עליה:
< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'טקסט' מציין מיקום = 'הזן טקסט כדי להוסיף אפשרות' >< בחר מזהה = 'אפשרויות' >
< ערך אופציה = 'ג' > ג אוֹפְּצִיָה >
בחר >
< br >< br >
< מזהה כפתור = 'הוסף btn' בלחיצה = 'insertOption()' > הוסף אפשרות לַחְצָן >
בקובץ JS, הגדר פונקציה בשם ' insertOption() ' ולאחר מכן גש ללחצן, לתיבת הטקסט ולרכיב הבחירה עם המזהים שהוקצו להם באמצעות ' querySelector() ' שיטה. לאחר מכן, צור מופע של האפשרות באמצעות הבנאי Option, וקרא למתודה add() על ידי העברת האפשרות הקיימת והאפשרות החדשה שיש להוסיף בסוף הרשימה:
functioninsertOption ( ){
const addBtn = מסמך. querySelector ( '#addbtn' ) ;
const קופסת רשימה = מסמך. querySelector ( '#אפשרויות' ) ;
const להפיל = מסמך. querySelector ( '#טקסט' ) ;
const אוֹפְּצִיָה = חָדָשׁ אוֹפְּצִיָה ( להפיל. ערך , להפיל. ערך ) ;
קופסת רשימה. לְהוֹסִיף ( אפשרות, לא מוגדרת ) ;
להפיל. ערך = '' ;
להפיל. מוֹקֵד ( ) ;
}
הפלט מראה שהאפשרות החדשה משדה הטקסט מתווספת בסוף התפריט הנפתח:
הערה: אתה יכול להשתמש בשיטה זו כדי להוסיף את האפשרות בתחילת תג הבחירה על ידי הוספת הערך של האפשרות הקיימת כפרמטר שני במקום לא מוגדר. זה יוסיף את האפשרות החדשה לפני הקיימת.
בואו נעבור לשיטה האחרת!
שיטה 2: הוסף אפשרות לבחירת תג מטקסט קלט באמצעות createElement() עם שיטת appendChild()
ישנה גישה נוספת שבה אתה יכול ליצור אלמנט חדש באמצעות ' createElement() שיטת ' עם ' appendChild() ' שיטה. על ידי שימוש במתודולוגיה זו, נוסיף את האפשרויות בתחילת תג הבחירה.
תחביר
השתמש בתחביר הבא להוספת אפשרות בתג select מתוך טקסט הקלט באמצעות שיטת appendChild():
appendChild ( newOptionValue ) ;דוגמא
כאן, ניצור רשימה נפתחת על ידי הוספת שתי אפשרויות ' ג ' ו' C++ ', שדה קלט וכפתור שיקרא לפונקציית JavaScript המוגדרת על ידי המשתמש בשם ' insertOption() ' כאשר אירוע ה-onclick שלו מופעל:
< סוג קלט = 'טֶקסט' תְעוּדַת זֶהוּת = 'טקסט' מציין מיקום = 'הזן טקסט כדי להוסיף אפשרות' >< בחר מזהה = 'להפיל' >
< אוֹפְּצִיָה > ג אוֹפְּצִיָה >
< אוֹפְּצִיָה > ג ++ אוֹפְּצִיָה >
בחר >
< br >< br >
< כפתור בלחיצה = 'insertOption();' > הוסף אפשרות לַחְצָן >
בפונקציה בשם ' insertOption() ', תחילה גש לרכיב הבחירה ולשדה הטקסט באמצעות המזהים שהוקצו להם ולאחר מכן, קרא לשיטות createElement() ו- createTextNode() ליצירת מופע אופציה ואחזר את ערך הטקסט כאופציה. לאחר מכן, קרא למתודה appendChild() והעביר את ערך הטקסט כאפשרות ואז הוסף אפשרות זו בתחילת רשימת הבחירה באמצעות ' insertBefore() 'שיטה עם רכיב בחר:
functioninsertOption ( ){
var select = מסמך. getElementById ( 'להפיל' ) ,
textValue = מסמך. getElementById ( 'טקסט' ) . ערך ,
אפשרות חדשה = מסמך. createElement ( 'אוֹפְּצִיָה' ) ,
newOptionValue = מסמך. createTextNode ( textValue ) ;
אפשרות חדשה. appendChild ( newOptionValue ) ;
בחר. הכנס לפני ( newOption, בחר. ילד ראשון ) ;
}
כפי שניתן לראות שהפלט מראה שהאפשרות החדשה משדה הטקסט מתווספת בתחילת התפריט הנפתח:
ריכזנו עבורכם את כל הפתרונות האפשריים להוספת אפשרויות מטקסט קלט לתגית הבחירה.
סיכום
כדי להוסיף אפשרות מטקסט קלט לתגית בחירה באמצעות JavaScript, אתה יכול להשתמש בשיטות המובנות של JavaScript, כולל שיטת add() או שיטת appendChild() . ניתן להוסיף אפשרויות בתגית בחירה בתחילת הרשימה וגם בסוף הרשימה. במדריך זה, הגדרנו את ההליך להוספת אפשרות מטקסט קלט לתגית בחירה באמצעות JavaScript עם דוגמאות מפורטות.