Obtener la opción seleccionada del menú desplegable en jQuery

1. Use el método .val() para obtener la opción seleccionada del menú desplegable
2. Use el método .find() para obtener la opción seleccionada del menú desplegable
3. Use el método .filter() para obtener la opción seleccionada del menú desplegable
4. Use la extensión jQuery del selector :selected para obtener la opción seleccionada del menú desplegable
5. Use el método .text() para obtener el texto de la opción seleccionada

Este tutorial abordará cómo obtener la opción seleccionada del menú desplegable usando jQuery. Usaremos los métodos .val(), .find() y .filter().

Además, discutiremos cómo obtener el texto de la opción seleccionada con .text().

Use el método .val() para obtener la opción seleccionada del menú desplegable

Usando el método .val(), obtenemos el valor del primer elemento en nuestra colección de elementos seleccionados. Tiene un caso especial cuando lo aplica a un elemento de selección desplegable y obtiene directamente el valor de la opción seleccionada en esta situación.

Usamos esta forma especial del método .val() en jQuery para obtener la opción seleccionada.

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is :
    ${$("#first-level").val()} <br>`);
});

Nuestro elemento de identificación #first-level es un cuadro de selección de una sola opción. Cuando se dispara la devolución de llamada, adjuntamos un controlador de eventos para escuchar el evento "change".

La devolución de llamada muestra la opción recién seleccionada ejecutando el método .html() en un elemento <p> con el ID p-primero.

La línea de ejecución clave es el código:

$("#first-level").val()

El método .val() se ejecuta en el cuadro de selección con el ID primer nivel para obtener directamente el valor de la opción seleccionada. Otro caso especial del método .val() nos permite extender su uso a la opción de selección de jQuery por valor para cuadros de selección de opción múltiple.

Cuando ejecutamos el método .val() en un cuadro de selección de opción múltiple, devuelve un array con los valores de todas las opciones seleccionadas.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

El método val() en el cuadro de selección de opción múltiple con el ID múltiple devuelve un array de los valores de las opciones seleccionadas. Luego encadenamos el método .map() para iterar sobre ellos y devolver un array de elementos <span> con los valores como texto para mostrar en la página.

También podemos usar el método jQuery .val() para obtener las opciones seleccionadas de los cuadros de selección agrupados.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

El cuadro de selección agrupado con ID grouped tiene sus opciones separadas en diferentes grupos con la etiqueta <optgroup>. Obtenemos fácilmente la opción seleccionada con el método .val().

Código completo:

//gets the selected option with the jQuery val() method

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

// this directly gets the selected option with the jQuery val() method

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Producción:

Puede leer en detalle sobre el método jQuery .val() aquí

Use el método .find() para obtener la opción seleccionada del menú desplegable

Podemos reducir nuestra colección de elementos a solo aquellos seleccionados con el método .find(). Luego, aplique el método .val() en su forma general para obtener el valor de la opción jQuery seleccionada.

El método .find() devuelve todos los descendientes del elemento en el que se ejecuta que coinciden con el argumento del selector que le pasamos. Al igual que:

$("ul .vegetables").find("li .green")

El .find() devolverá solo los elementos verdes li que son descendientes del elemento ul de la clase .vegetables. Podemos usarlo para obtener opciones seleccionadas de los menús desplegables de una sola opción.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").val()} <br>`);
});

Usamos el selector :selected para primero encontrar solo aquellos elementos descendientes de opción del cuadro select de first-level. Luego encadenamos el método .val() en su forma general para obtener el valor.

También podemos extender este método a cuadros de selección de opción múltiple.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").find(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

Primero encontramos la colección de elementos opción seleccionados con el fragmento de código $("multiple").find(:selected). Luego los iteramos encadenando el método .map().

La devolución de llamada recopila los valores de las opciones seleccionadas con el fragmento de código $(this).val() en un array de elementos <span>. Por último, encadenamos los métodos get() y join() para mostrar estos valores en un buen texto.

Podemos usar el mismo método para cuadros de selección agrupados.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").find(":selected").val()
       }`);
})

Código completo:

// we first select the particular option using the find method and then find its val indirectly here

// first-select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").find(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").find(":selected").val()
       }`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Producción:

Lea en detalle sobre el método .find() aquí

Use el método .filter() para obtener la opción seleccionada del menú desplegable

Podemos usar el método .filter() para recopilar solo las opciones seleccionadas. Luego podemos ejecutar el método .val() en su forma habitual para obtener el valor de la opción jQuery seleccionada.

El método .filter() se diferencia del método .find() en que no selecciona los descendientes sino que solo selecciona los elementos coincidentes de la colección a la que se llama. Como en el siguiente fragmento, podemos usarlo para jQuery seleccionar la opción por valor.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level option").filter(":selected").val()} <br>`);
});

Usamos el selector $("#first-level option") para recopilar explícitamente los elementos option del elemento first-level select.

Recuerda, .filter() no obtiene automáticamente los elementos descendientes como el método .find(). Tenemos que hacerlo manualmente.

Luego, encadenamos el método .filter(":selected") para obtener el elemento option seleccionado, y encadenamos el método .val() para obtener la opción seleccionada de jQuery. También podemos hacer lo mismo para los cuadros de selección de opción múltiple.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple option").filter(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

El código es similar a la solución .find() anterior, excepto que necesitamos seleccionar manualmente los elementos option con el fragmento $("#multiple option") antes de encadenar el método .filter(). Asimismo, podemos utilizar esta solución para opciones agrupadas y menús desplegables de selección.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped option").filter(":selected").val()
       }`);
})

Código completo:

// we can get the selected option with indirect use of val() method and the filter() method

// first-select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level option").filter(":selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple option").filter(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped option").filter(":selected").val()
       }`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Producción:

Use la extensión jQuery del selector :selected para obtener la opción seleccionada del menú desplegable

También podemos seleccionar directamente solo las opciones seleccionadas con la extensión jQuery :selected en lugar de utilizar los métodos .find() o .filter().

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level :selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple :selected").map(function(){
                    return (`<span> ${$(this).val()} </span>`)
                }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped :selected").val()}`);
})

El código es el mismo que los otros métodos anteriores, excepto que usamos la expresión de selector $("first-level :selected") antes de encadenar los otros métodos.

Producción:

Es mejor usar .find() o .filter() primero porque el pseudo-selector :selected es una extensión de jQuery y no forma parte de CSS. Por lo tanto, no se beneficia del aumento de rendimiento de los métodos DOM nativos como lo hacen los selectores CSS puros.

El selector :checked obtiene las opciones seleccionadas cuando se aplica a un elemento 'select'. Es un selector de CSS puro, por lo que funciona mejor que el pseudo-selector :selected.

Use el método .text() para obtener el texto de la opción seleccionada

Es posible que desee encontrar el texto dentro del elemento opción en lugar de value. Puede usar el método .text() para jQuery para obtener el texto de la opción seleccionada.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").text()} <br>`);
});

El resto del código es igual que los otros métodos anteriores, excepto que encadenamos el método .text() al final en lugar del método .val() para obtener el texto de la opción seleccionada.

Producción: