Agregar opciones para seleccionar con JavaScript
-
Crear etiqueta de
option
y agregar para seleccionar en JavaScript -
Use el constructor
Option
para agregar nuevas opciones en JavaScript -
Use el elemento DOM
jQuery
para agregar nuevas opciones en JavaScript
![Agregar opciones para seleccionar con JavaScript](/img/JavaScript/feature-image---add-options-to-select-with-javascript.webp)
Generalmente, las opciones de un elemento select
se pueden organizar manualmente.
Pero tener muchas opciones y la falta de manejo dinámico de las categorías puede generar problemas en el caso manual. En este sentido, los métodos de JavaScript para crear nuevas opciones y modificarlas a pedido son mucho más aceptables.
Demostraremos tres formas de agregar nuevas opciones al elemento select
. En primer lugar, crearemos un elemento option
manipulando el DOM y agregando texto y valor para almacenar el objeto.
Más tarde, agregaremos el objeto al ID de selección. Otra forma es iniciar un constructor de option
y agregar el texto y el valor necesarios.
Mostraremos el trabajo agregándolo al objeto del elemento seleccionado. Y, por último, cree un elemento Dom jQuery
y añádalo a select
.
Crear etiqueta de option
y agregar para seleccionar en JavaScript
Declararemos una instancia (x
) para select
y crearemos una opción de objeto
para la opción de elemento
. A continuación, asignaremos texto y valor al objeto.
Veamos las líneas de código para una mejor comprensión.
Fragmento de código:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "hand";
console.log(option.value);
option.text = "Hand";
x.add(option);
}
</script>
</body>
</html>
Producción:
Entonces, el último comando de la etiqueta con script tiene x.add(option)
, lo que implica unir la nueva opción a la selección. Aquí, puede usar append
y appendChild
en lugar de add
, que funcionará bien.
Use el constructor Option
para agregar nuevas opciones en JavaScript
El siguiente ejemplo solo requiere un constructor Option
para crear una nueva ranura para una nueva opción.
El constructor Option
toma solo dos parámetros. En primer lugar, toma el valor del texto y luego la entrada del atributo de valor.
Fragmento de código:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = new Option("Hand", "hand");
console.log(option.value);
x.appendChild(option);
}
</script>
</body>
</html>
Producción:
Use el elemento DOM jQuery
para agregar nuevas opciones en JavaScript
El elemento DOM jQuery
activa la etiqueta option
, y luego se utilizan .val
y .text
para definir el texto y el valor. Luego lo agregamos al select-id
.
Fragmento de código:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function myF() {
$('#mySelect').append($('<option>').val('head').text('Head'));
}
</script>
</body>
</html>
Producción: