Eliminar, agregar y seleccionar las opciones de una etiqueta de selección mediante jQuery
-
Añadir opciones de la etiqueta
<select> -
Quitar opciones de la etiqueta
<select> - Eliminar, agregar y seleccionar la opción de un cuadro de selección usando jQuery
Nos centraremos en tres características distintas en este artículo. El primero implica agregar la opción, el segundo es eliminar la opción y el tercero implica realizar ambas acciones dentro del mismo código.
El artículo de hoy tiene como objetivo eliminar todas las opciones existentes de una etiqueta de selección, luego agregar nuevas opciones y seleccionarlas. Todas estas acciones deben realizarse con la ayuda de jQuery. Iremos en pequeños pasos.
Primero estudiaremos cómo agregar opciones, descubriremos varios métodos para eliminar opciones y, finalmente, aprenderemos cómo eliminar, agregar y seleccionar opciones en un fragmento de código.
Añadir opciones de la etiqueta <select>
Por lo general, agregamos las opciones de una etiqueta <select> sin usar JavaScript, pero a veces es posible que necesitemos agregar las opciones en los menús desplegables de nuestras páginas web usando jQuery o JS. Discutiremos algunos métodos que nos ayudarán a agregar las opciones.
Use JavaScript para agregar opciones
Comenzaremos hablando de agregar las opciones usando JavaScript. Tenemos mucha flexibilidad para jugar con los elementos de nuestras páginas web gracias a la facilidad de uso de JavaScript.
Consulte los requisitos para agregar la <opción> en el código a continuación.
<html>
<head>
<script>
window.onload = function(){
var length = document.getElementById("drop_down").options.length;
drop_down.options[length] = new Option ("Text4");
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
La variable de longitud se establecerá en 3 ya que la etiqueta <select> contiene tres opciones. El índice se puede utilizar para encontrar cualquier etiqueta.
Cuando hablamos de las opciones en la etiqueta <select>, la primera opción está en el índice 0. La segunda está en el índice 1, y así sucesivamente.
Podemos agregar una nueva opción determinando la longitud total de la matriz de opciones y luego creando una nueva opción en el índice adyacente a la última, como se muestra en el código.
Use el método .append() para agregar opciones
La siguiente técnica que podemos usar para agregar las opciones a la etiqueta <select> existente es el método .append() de jQuery. El método append() añade el contenido al final de los elementos elegidos.
Podemos pasar el texto así como elementos HTML en el parámetro. Verifique el código y su salida a continuación para comprender el funcionamiento del método .append().
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").append('<option>Text4</option>')
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
La función append() agrega la opción al final, como se ve en la salida. Puede usar la función .prepend() para agregar la opción al principio.
También puede agregar opciones a las ubicaciones que no sean de inicio o fin. Para insertar la opción después de cualquier opción específica, puede usar el método after() y para agregar la opción antes de la seleccionada, puede usar el método .before().
Quitar opciones de la etiqueta <select>
Podemos eliminar las opciones de una lista desplegable usando JavaScript y jQuery. Discutamos diferentes enfoques para ayudarnos a eliminar las opciones de una etiqueta <select>.
Utilice los métodos .find() y .remove() para eliminar las opciones de la etiqueta <select>
El primer método que discutiremos para eliminar las opciones de una etiqueta de selección es usar los métodos .find() y .remove() de jQuery.
.find(): este método recupera los elementos descendientes del elemento. Los hijos, nietos, bisnietos, etc., se consideran descendientes. A diferencia de otras técnicas de recorrido de árboles, la función find() requiere el parámetro de filtro.
.remove(): el elemento seleccionado y sus elementos secundarios se eliminan utilizando este método jQuery.
Veamos el funcionamiento de estas dos funciones en el siguiente código.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').find('option').remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
Como se dijo anteriormente, el método find() requiere el parámetro de filtro, por lo que le dimos la opción como filtro, haciendo que recupere todas las etiquetas de opción del elemento seleccionado. Luego invocamos el método de eliminación, que eliminó todas las etiquetas de opción obtenidas, como se ve en la salida.
También puede eliminar solo una opción en particular de una etiqueta seleccionada sin eliminarlas todas. Se puede eliminar simplemente especificando el índice de la opción.
Por ejemplo, si queremos eliminar la segunda opción, sabemos que estará en el índice 1. Simplemente podemos escribir $('#drop down').find('option')[1].remove() para bórralo.
Utilice los métodos .children() y .remove() para eliminar las opciones de la etiqueta <select>
Otro método que podemos usar para eliminar todas las opciones de una etiqueta <select> es usar los métodos .children() y .remove(). El método .remove() elimina todos los elementos seleccionados, y el método .children() devuelve todos los elementos secundarios directos del elemento seleccionado.
Observe el código a continuación para comprender el funcionamiento de estos métodos.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').children().remove();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
Utilice el método .empty() para eliminar las opciones de la etiqueta <select>
Si no desea utilizar varios métodos para eliminar las opciones, no se preocupe; jQuery lo tiene cubierto. jQuery tiene un método .empty() que elimina todos los elementos secundarios del elemento seleccionado. Este método no eliminará el elemento en sí.
Para comprenderlo, examine el código y sus resultados.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty();
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
El menú desplegable todavía está allí pero sin opciones, como se ve en la salida.
Utilice el método .options para eliminar las opciones de la etiqueta <select>
Otro método útil para eliminar la opción es usar la función .options de JavaScript. Este es el método convencional para borrar todas las opciones.
El método .options devuelve todas las opciones de una lista desplegable. Lo que tenemos que hacer es poner opciones.longitud igual a cero.
El método de la longitud nos dice el recuento de los elementos contenidos en un elemento en particular. Si lo ponemos a cero, indica que no hay ningún elemento dentro del seleccionado. Increíble, ¿verdad?
Eche un vistazo al código para una mejor comprensión.
<html>
<head>
<script>
window.onload = function(){
document.getElementById("drop_down").options.length=0;
}
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
Eliminar, agregar y seleccionar la opción de un cuadro de selección usando jQuery
Hasta ahora, hemos cubierto los métodos y estrategias para utilizar jQuery para agregar y eliminar opciones de una etiqueta seleccionada. A medida que nos acerquemos al objetivo principal del artículo, repasaremos la combinación de las operaciones de agregar, eliminar y seleccionar en un solo código.
Existen numerosas formas de lograr esta funcionalidad. Para ayudarlo a comprender, repasaremos cada técnica en profundidad. Vamos a empezar.
Utilice los métodos .remove() y .append() para eliminar, agregar y seleccionar la opción
Creemos que ahora está bastante familiarizado con los métodos jQuery .remove() y .append(). Usaremos .remove() para eliminar todas las etiquetas de opción del elemento seleccionado y luego .append() para agregar una nueva opción.
Compruebe el código de abajo para entender.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down')
.find('option')
.remove()
.end()
.append('<option value="4">Text4</option>')
.val('4');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option value="1">Text1</option>
<option value="2">Text2</option>
<option value="3">Text3</option>
</select>
</body>
</html>
Producción:
Puede que esté confundido acerca de por qué existe un método .end() y qué hace. La acción de filtrado más reciente en la cadena actual finaliza utilizando el método .end() en jQuery.
Cuando se usa jQuery para encadenar, el método .end() es útil.
Por último, aplicamos el método .val() para establecer el valor del elemento seleccionado. Usamos esto porque queríamos elegir la opción que agregamos.
Utilice los métodos .empty() y .append() para eliminar, agregar y seleccionar la opción
Otro enfoque que discutimos para eliminar todas las opciones de una lista desplegable es el método .empty(), que eliminará todas las opciones y luego usaremos .append() para agregar una nueva opción. Verifique el código a continuación.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').empty().append('<option selected="selected">Text4</option>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
Utilice JavaScript para eliminar, agregar y seleccionar la opción
Para nuestra funcionalidad necesaria, se puede utilizar JavaScript. En las secciones anteriores, entramos en gran detalle sobre cómo agregar y eliminar opciones usando JavaScript.
Para una mejor comprensión, mire el código a continuación.
<html>
<cabeza>
<secuencia de comandos src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></secuencia de comandos>
<script>
$(documento).listo(función(){
var mySelect = document.getElementById('drop_down');
mySelect.options.length = 0;
mySelect.options[0] = nueva opción ("Texto4");
mySelect.options[0].selected="true";
});
</script>
</cabeza>
<cuerpo>
<seleccione id="desplegable" estilo="ancho:100px">
<opción>Texto1</opción>
<opción>Texto2</opción>
<opción>Texto3</opción>
</seleccionar>
</cuerpo>
</html>
Producción:
Reemplace el contenido utilizando el método .html()
Al reemplazar todo el contenido de la etiqueta <select> con la nueva opción requerida, podemos eliminar todas las opciones de una etiqueta <select>, agregar una nueva opción y seleccionarla usando jQuery. Para ello, utilizaremos el método .html().
El método .html() establece o devuelve el contenido del elemento especificado. Cuando se usa para recuperar contenido, esta función devuelve el contenido del primer elemento coincidente, y cuando se usa para establecer contenido, esta técnica sobrescribe el contenido de todos los elementos coincidentes.
Veamos el funcionamiento de este método.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#drop_down").html("<option selected=\"selected\">Text4</option>")
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción:
El contenido reemplaza completamente el contenido existente de la etiqueta <select> que especificamos en el método .html(), como se ve en la salida.
Reemplace el contenido usando el método .replaceWith()
El método jQuery .replaceWith() nos permite reemplazar el elemento seleccionado con el contenido especificado. Verifique el código para averiguar el método para reemplazar el contenido.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#drop_down').replaceWith('<select id="drop_down"> <option selected="selected">Text4</option> </select>');
});
</script>
</head>
<body>
<select id="drop_down" style="width:100px">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
</select>
</body>
</html>
Producción: