Acest tutorial va defini procedura de adăugare a unei opțiuni dintr-un text de intrare la o etichetă de selectare folosind JavaScript.
Cum se adaugă opțiunea de selectare a etichetei din textul introdus folosind JavaScript?
Pentru a adăuga o opțiune dintr-un text de intrare la o etichetă de selectare folosind JavaScript, puteți utiliza diferite metode, cum ar fi:
Să explorăm fiecare metodă una câte una!
Metoda 1: Adăugați o opțiune pentru a selecta eticheta din textul de intrare folosind metoda add() cu constructorul de opțiuni
Pentru a adăuga o opțiune din textul introdus într-o etichetă de selectare, utilizați „ adăuga() „metoda cu „ Opțiune ” Constructor. Metoda add() este folosită pentru a adăuga elemente la opțiunile „ HTMLSelectElement ” cunoscut și sub numele de etichetă
Sintaxă
Urmați sintaxa furnizată pentru a utiliza metoda add() pentru a adăuga o opțiune într-o etichetă select:
adăuga ( option, existentOption ) ;Aici ' opțiune ” reprezintă noua opțiune care va fi adăugată în locul „ existentOpțiune ”.
Exemplu
Vom crea un câmp de introducere, un meniu derulant folosind
< selectați id = 'Opțiuni' >
< valoarea opțiunii = 'c' > C opțiune >
Selectați >
< br >< br >
< ID-ul butonului = 'adăugați btn' onclick = „insertOption()” > Adăugați opțiunea buton >
În fișierul JS, definiți o funcție numită „ insertOption() ” și apoi accesați butonul, caseta de text și elementul de selectare cu ID-urile atribuite folosind „ querySelector() ” metoda. Apoi, creați o instanță a opțiunii folosind constructorul Option și apelați metoda add() trecând opțiunea existentă și noua opțiune care trebuie adăugată la sfârșitul listei:
functioninsertOption ( ){
const addBtn = document. querySelector ( „#addbtn” ) ;
const listbox = document. querySelector ( '#Opțiuni' ) ;
const scapă jos = document. querySelector ( '#txt' ) ;
const opțiune = nou Opțiune ( scapă jos. valoare , scapă jos. valoare ) ;
listbox. adăuga ( opțiune, nedefinită ) ;
scapă jos. valoare = '' ;
scapă jos. se concentreze ( ) ;
}
Rezultatul arată că noua opțiune din câmpul de text este adăugată la sfârșitul meniului derulant:
Notă: Puteți folosi această metodă pentru a adăuga opțiunea la începutul etichetei select adăugând valoarea opțiunii existente ca al doilea parametru în loc de nedefinit. Va adăuga noua opțiune înaintea celei existente.
Să trecem la cealaltă metodă!
Metoda 2: Adăugați opțiunea pentru a selecta eticheta din textul introdus folosind metoda createElement() cu appendChild()
Există o altă abordare prin care puteți crea un element nou folosind „ createElement() ” metoda cu “ appendChild() ” metoda. Utilizând această metodologie, vom adăuga opțiunile la începutul etichetei select.
Sintaxă
Utilizați următoarea sintaxă pentru adăugarea opțiunii în eticheta select din textul introdus folosind metoda appendChild():
appendChild ( newOptionValue ) ;Exemplu
Aici, vom crea o listă derulantă adăugând două opțiuni „ C ' și ' C++ ”, un câmp de introducere și un buton care va apela funcția JavaScript definită de utilizator numită „ insertOption() ” când evenimentul său onclick este declanșat:
< tip de introducere = 'text' id = 'txt' substituent = „Introduceți text pentru a adăuga opțiunea” >< selectați id = 'scapă jos' >
< opțiune > C opțiune >
< opțiune > C ++ opțiune >
Selectați >
< br >< br >
< butonul la clic = „insertOption();” > Adăugați opțiunea buton >
Într-o funcție numită „ insertOption() ”, accesați mai întâi elementul de selectare și câmpul de text folosind ID-urile atribuite și apoi apelați metodele createElement() și createTextNode() pentru a crea o instanță de opțiune și preluați valoarea textului ca opțiune. După aceea, apelați metoda appendChild() și transmiteți valoarea textului ca opțiune, apoi adăugați această opțiune la începutul listei de selectare folosind „ insertBefore() ” metoda cu element select:
functioninsertOption ( ){
var select = document. getElementById ( 'scapă jos' ) ,
textValue = document. getElementById ( 'txt' ) . valoare ,
newOption = document. createElement ( 'Opțiune' ) ,
newOptionValue = document. createTextNode ( textValue ) ;
newOption. appendChild ( newOptionValue ) ;
Selectați. inserați Înainte ( newOption, selectați. primul copil ) ;
}
După cum puteți vedea, rezultatul arată că noua opțiune din câmpul de text este adăugată la începutul meniului derulant:
Am compilat toate soluțiile posibile pentru adăugarea de opțiuni dintr-un text de intrare la eticheta select.
Concluzie
Pentru a adăuga o opțiune dintr-un text de intrare la o etichetă de selectare folosind JavaScript, puteți utiliza metodele încorporate JavaScript, inclusiv metoda add() sau metoda appendChild(). Puteți adăuga opțiuni într-o etichetă selectată la începutul listei, precum și la sfârșitul listei. În acest tutorial, am definit procedura de adăugare a unei opțiuni dintr-un text de intrare la o etichetă de selectare folosind JavaScript cu exemple detaliate.