Cómo agregar la opción para seleccionar la etiqueta del texto de entrada usando JavaScript

Al desarrollar un sitio web, puede haber un requisito para agregar nuevas opciones al elemento seleccionado dinámicamente, que se vuelve desafiante para principiantes. En tal situación, puede utilizar diferentes métodos de JavaScript con el fin de agregar opciones a la etiqueta Seleccionar desde el texto de entrada agregado. No sé como?

Este tutorial definirá el procedimiento para agregar una opción de un texto de entrada a una etiqueta Seleccionar usando JavaScript.

Cómo agregar la opción para seleccionar la etiqueta del texto de entrada usando JavaScript?

Para agregar una opción de un texto de entrada a una etiqueta Seleccionar usando JavaScript, puede usar diferentes métodos, como:

• ADD () Método con el constructor de opciones
• método createElement () con el método appendChild ()

Exploremos cada método uno por uno!

Método 1: Agregar opción para seleccionar la etiqueta del texto de entrada usando el método add () con el constructor de opciones

Para agregar una opción del texto de entrada en una etiqueta de selección, use el "agregar()"Método con"Opción"Constructor. El método add () se usa para agregar los elementos a las opciones del "Htmlselectelement"También conocido como etiqueta. Se necesitan dos parámetros como argumentos.

Sintaxis

Siga la sintaxis proporcionada para usar el método add () para agregar una opción en una etiqueta Seleccionar:

ADD (opción, ExistitOption);

Aquí el "opción"Representa la nueva opción que se agregará en lugar del"opción existente".

Ejemplo

Crearemos un campo de entrada, un menú desplegable usando etiqueta y un botón que agregará nuevas opciones en un elemento seleccionado, invocando el "insertOption ()"Función cuando se hace clic:

C




Añadir opción

En el archivo js, ​​defina una función llamada "insertOption ()"Y luego acceda al botón, el cuadro de texto y el elemento Seleccionar con sus ID asignados usando el"QuerySelector ()" método. Luego, cree una instancia de la opción usando el constructor de opciones y llame al método add () pasando la opción existente y la nueva opción que debe agregarse al final de la lista:

FunctionInStoPtion ()

const addBtn = documento.QuerySelector ('#addBtn');
const listBox = documento.QuerySelector ('#opciones');
Const desplegable = documento.QuerySelector ('#txt');
opción const = nueva opción (desplegable.valor, desplegable.valor);
cuadro de lista.agregar (opción, indefinido);
desplegable.valor = ";
desplegable.enfocar();

La salida muestra que la nueva opción del campo de texto se agrega al final del menú desplegable:

Nota: Puede usar este método para agregar la opción al comienzo de la etiqueta Seleccionar agregando el valor de la opción existente como segundo parámetro en lugar de indefinido. Agregará la nueva opción antes de la existente.

Pasemos al otro método!

Método 2: Agregar opción para seleccionar la etiqueta del texto de entrada usando createElement () con el método appendChild ()

Hay otro enfoque utilizando el que puede crear un nuevo elemento utilizando el "createElement ()"Método con el"añadir Niño()" método. Al usar esta metodología, agregaremos las opciones al comienzo de la etiqueta Seleccionar.

Sintaxis

Use la siguiente sintaxis para agregar opción en la etiqueta Seleccionar desde el texto de entrada usando el método AppendChild ():

appendChild (NewOptionValue);

Ejemplo

Aquí, crearemos una lista desplegable agregando dos opciones "C" y "C++", Un campo de entrada y un botón que llamará a la función JavaScript definida por el usuario llamada"insertOption ()"Cuando se activa su evento OnClick:

C
C++




Añadir opción

En una función llamada "insertOption ()", Primero acceda al elemento Seleccionar y al campo de texto utilizando sus ID asignados y luego, llame a los métodos createElement () y createTextNode () para crear una instancia de opción y obtener el valor de texto como una opción. Después de eso, llame al método appendChild () y pase el valor de texto como opción, agregue esta opción al comienzo de la lista de selección usando "insertBefore ()Método "con elemento seleccionar:

FunctionInStoPtion ()

var select = documento.getElementById ("desplegable"),
textValue = documento.getElementById ("txt").valor,
newoction = documento.CreateElement ("Opción"),
NewOptionValue = documento.CreateTeTextNode (TextValue);
timbre.appendChild (NewOptionValue);
seleccionar.insertBefore (NewOption, seleccione.primer hijo);

Como puede ver, la salida muestra que la nueva opción del campo de texto se agrega al inicio del menú desplegable:

Hemos compilado todas las soluciones posibles para agregar opciones desde un texto de entrada a la etiqueta Seleccionar.

Conclusión

Para agregar una opción desde un texto de entrada a una etiqueta Seleccionar usando JavaScript, puede usar los métodos incorporados JavaScript, incluido el método add () o appendChild (). Puede agregar opciones en una etiqueta de selección al comienzo de la lista, así como al final de la lista. En este tutorial, hemos definido el procedimiento para agregar una opción de un texto de entrada a una etiqueta de selección usando JavaScript con ejemplos detallados.