Agregar opciones para seleccionar con JavaScript
-
Crear etiqueta de
optiony agregar para seleccionar en JavaScript -
Use el constructor
Optionpara agregar nuevas opciones en JavaScript -
Use el elemento DOM
jQuerypara agregar nuevas opciones en JavaScript
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:
