Cómo agregar opciones para seleccionar con JavaScript

En JavaScript, generalmente encontramos un desafío en el que debemos incluir una lista compleja en la que queremos agregar o editar una opción en el caso de actualizaciones o cambios en los criterios. Además, tener muchas opciones y la falta de manejo de las categorías puede causar problemas en escenarios manuales. En estos escenarios, los métodos JavaScript proporcionados para agregar nuevas opciones pueden rescatarlo.

Este artículo guiará sobre la adición de opciones para seleccionar con JavaScript.

Cómo agregar/insertar opciones para seleccionar con JavaScript?

Podemos agregar opciones para seleccionar con JavaScript utilizando tres métodos simples:

• "documento.createElement ()" método
• "JQuery" Biblioteca
• "Opción()"Constructor

Ahora pasaremos por cada uno de los enfoques mencionados uno por uno!

Método 1: Agregar opciones para seleccionar con JavaScript usando el documento.método createElement ()

El "documento.createElement ()El método "crea un nodo de elemento. También puede utilizar este método para crear una opción adicional en la lista de opciones existentes. Esta funcionalidad se logrará mediante la inclusión de un botón que agregará la opción especificada a la lista cuando se haga clic en.

Para agregar opciones para seleccionar con JavaScript usando el documento.método createElement (), debes seguir la sintaxis dada por debajo.

Sintaxis

documento.CreateElement (tipo)

Aquí, "tipo"Se refiere al tipo de elemento que debe crearse.

Mire el siguiente ejemplo para comprender el concepto declarado.

Ejemplo
En el siguiente ejemplo, asignaremos una identificación específica ","adiciones"Y el tamaño"3", Que se refiere al tamaño del contenedor en el que se colocan tres opciones. Ahora, asignaremos los valores de las opciones nombradas "Pitón" y "Java". Después de eso, agregue un botón con un "al hacer clic" evento. Funcionará de tal manera que cuando se presione el botón, la función "addOptions ()Se activará:

Pitón
Java

Agregar nueva opción

En el siguiente paso, definiremos la función "addOptions ()"Y acceda a la ID especificada de Select usando el"documento.getElementById ()" método. Después de eso, crearemos un "opción"Elemento para agregar un nuevo valor en la lista de opciones.

Por último, asignaremos un valor "Javascript"A la opción específica y agréguela a la lista de opciones utilizando el"agregar()" método:

La salida de la implementación anterior dará como resultado lo siguiente:

Método 2: Agregar opciones para seleccionar con JavaScript usando jQuery

"JQuery"Es una biblioteca esencial de JavaScript que hace que la programación de JavaScript sea más simple. Puedes utilizar su "adjuntar()Método "para agregar una opción y asignar un valor específico a esa opción particular.

Pasemos por el siguiente ejemplo de demostración.

Ejemplo
En el mismo archivo HTML, ahora incluiremos una biblioteca jQuery dentro del HTML "" etiqueta:

A continuación, aplicaremos las funcionalidades para agregar una opción en la lista de opciones en una función llamada "addOptions ()". Aquí, accederemos a la identificación de seleccionar usando "#AdDOptions", Agregue una nueva opción usando"adjuntar()"Método con la ayuda del"val ()" y "texto()" métodos:

La salida resultante será:

Método 3: Agregar opciones para seleccionar con JavaScript usando el constructor opción ()

El "Opción()"El constructor crea un nuevo"HtmloptionElement". Se puede utilizar para agregar una nueva ranura para una opción adicional llamada "Javascript".

Para agregar opciones para seleccionar con JavaScript usando el método del constructor opción (), debe seguir la sintaxis dada a continuación.

Sintaxis

nueva opción (texto, valor)

Aquí, "texto"Representa el contenido del elemento y"valor"Se refiere al valor de htmloptionElement

Ejemplo
Ahora utilizaremos el "addOptions ()"Función para obtener la ID de selección con la ayuda del"documento.getElementById ()" método. Entonces, llame al "Opción()"Constructor y coloque el valor de opción"Javascript" en eso. Después de eso, el "añadir Niño()El método "agregará el valor de la opción especificado al final de la lista:

Producción

Hemos proporcionado métodos más simples para agregar opciones para seleccionar con JavaScript.

Conclusión

Para agregar opciones para seleccionar con JavaScript, puede usar el "documento.createElement ()"Método para crear un elemento de opción e incluir el valor de opción especificado en él o el"JQuery"Biblioteca o el"Opción()"Método del constructor para agregar una nueva ranura para una opción adicional y agregar su valor en la lista de opciones. Este artículo le guió sobre la adición de opciones para seleccionar con JavaScript.