Aquest tutorial definirà el procediment per afegir una opció des d'un text d'entrada a una etiqueta de selecció mitjançant JavaScript.
Com afegir una opció per seleccionar l'etiqueta del text d'entrada mitjançant JavaScript?
Per afegir una opció d'un text d'entrada a una etiqueta de selecció mitjançant JavaScript, podeu utilitzar diferents mètodes, com ara:
Explorem cada mètode un per un!
Mètode 1: Afegeix una opció per seleccionar l'etiqueta del text d'entrada mitjançant el mètode add() amb el constructor d'opcions
Per afegir una opció del text d'entrada en una etiqueta de selecció, utilitzeu el botó “ afegir() ' mètode amb ' Opció ” Constructor. El mètode add() s'utilitza per afegir els elements a les opcions del ' HTMLSelectElement ” també coneguda com a etiqueta
Sintaxi
Seguiu la sintaxi proporcionada per utilitzar el mètode add() per afegir una opció en una etiqueta de selecció:
afegir ( option, existentOption ) ;Aquí, el ' opció ' representa la nova opció que s'afegirà en lloc del ' opció existent ”.
Exemple
Crearem un camp d'entrada, un menú desplegable utilitzant
< seleccioneu id = 'opcions' >
< valor de l'opció = 'c' > C opció >
seleccionar >
< br >< br >
< identificador del botó = 'afegeix btn' fent clic = 'insertOption()' > Afegeix una opció botó >
Al fitxer JS, definiu una funció anomenada ' insertOption() ' i, a continuació, accediu al botó, al quadre de text i a l'element de selecció amb els seus identificadors assignats mitjançant el ' querySelector() ” mètode. A continuació, creeu una instància de l'opció utilitzant el constructor d'opcions i crideu al mètode add() passant l'opció existent i la nova opció que cal afegir al final de la llista:
functioninsertOption ( ){
const afegirBtn = document. querySelector ( '#addbtn' ) ;
const quadre de llista = document. querySelector ( '#opcions' ) ;
const desplegable = document. querySelector ( '#txt' ) ;
const opció = nou Opció ( desplegable. valor , desplegable. valor ) ;
quadre de llista. afegir ( opció, sense definir ) ;
desplegable. valor = '' ;
desplegable. focus ( ) ;
}
La sortida mostra que la nova opció del camp de text s'afegeix al final del menú desplegable:
Nota: Podeu utilitzar aquest mètode per afegir l'opció al principi de l'etiqueta de selecció afegint el valor de l'opció existent com a segon paràmetre en lloc de no definir. Afegirà la nova opció abans que l'existent.
Passem a l'altre mètode!
Mètode 2: Afegeix una opció per seleccionar l'etiqueta del text d'entrada mitjançant createElement() Amb el mètode appendChild()
Hi ha un altre enfocament amb el qual podeu crear un element nou amb el ' createElement() ' mètode amb el ' appendChild() ” mètode. Mitjançant aquesta metodologia, afegirem les opcions al començament de l'etiqueta de selecció.
Sintaxi
Utilitzeu la sintaxi següent per afegir l'opció a l'etiqueta de selecció del text d'entrada mitjançant el mètode appendChild():
appendChild ( newOptionValue ) ;Exemple
Aquí, crearem una llista desplegable afegint dues opcions ' C ' i ' C++ ”, un camp d'entrada i un botó que cridarà la funció JavaScript definida per l'usuari anomenada “ insertOption() ” quan s'activa el seu esdeveniment onclick:
< tipus d'entrada = 'text' id = 'txt' posseïdor del lloc = 'Introdueix text per afegir l'opció' >< seleccioneu id = 'menjador desplegable' >
< opció > C opció >
< opció > C ++ opció >
seleccionar >
< br >< br >
< botó al fer clic = 'insertOption();' > Afegeix una opció botó >
En una funció anomenada ' insertOption() ”, primer accediu a l'element de selecció i al camp de text mitjançant els seus identificadors assignats i, a continuació, truqueu als mètodes createElement() i createTextNode() per crear una instància d'opció i obteniu el valor del text com a opció. Després d'això, truqueu al mètode appendChild() i passeu el valor del text com a opció i, a continuació, afegiu aquesta opció al principi de la llista de selecció mitjançant ' insertBefore() ” mètode amb element selecte:
functioninsertOption ( ){
var seleccionar = document. getElementById ( 'menjador desplegable' ) ,
textValue = document. getElementById ( 'txt' ) . valor ,
nova opció = document. createElement ( 'Opció' ) ,
newOptionValue = document. createTextNode ( textValue ) ;
nova opció. appendChild ( newOptionValue ) ;
seleccionar. inserir abans ( nova opció, seleccioneu. primerfill ) ;
}
Com podeu veure, la sortida mostra que la nova opció del camp de text s'afegeix a l'inici del menú desplegable:
Hem recopilat totes les solucions possibles per afegir opcions des d'un text d'entrada a l'etiqueta de selecció.
Conclusió
Per afegir una opció d'un text d'entrada a una etiqueta de selecció mitjançant JavaScript, podeu utilitzar els mètodes integrats de JavaScript, inclòs el mètode add() o el mètode appendChild(). Podeu afegir opcions en una etiqueta de selecció al principi de la llista així com al final de la llista. En aquest tutorial, hem definit el procediment per afegir una opció des d'un text d'entrada a una etiqueta de selecció mitjançant JavaScript amb exemples detallats.