Pregunta jQuery Obtener la opción seleccionada de la lista desplegable


Usualmente uso $("#id").val() para devolver el valor de la opción seleccionada, pero esta vez no funciona. La etiqueta seleccionada tiene la identificación aioConceptName

código HTML

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

878
2018-05-18 20:11


origen


Respuestas:


Para las opciones desplegables, probablemente desee algo como esto:

var conceptName = $('#aioConceptName').find(":selected").text();

La razón val() no funciona el truco porque hacer clic en una opción no cambia el valor del menú desplegable; simplemente agrega el :selected propiedad a la opción seleccionada que es una niño del menú desplegable.


1497
2018-05-18 20:14



Establezca los valores para cada una de las opciones

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val() no funcionó porque .val() devuelve el value atributo. Para que funcione correctamente, value los atributos deben establecerse en cada <option>.

Ahora puedes llamar $('#aioConceptName').val() en lugar de todo esto :selected vudú siendo sugerido por otros.


268
2017-10-26 16:50



Me encontré con esta pregunta y desarrollé una versión más concisa de la respuesta de Elliot BOnneville:

var conceptName = $('#aioConceptName :selected').text();

o genéricamente:

$('#id :pseudoclass')

Esto le ahorra una llamada jQuery adicional, selecciona todo de una vez, y es más claro (mi opinión).


138
2017-11-01 17:16



Prueba esto por valor ...

$("select#id_of_select_element option").filter(":selected").val();

o esto por texto ...

$("select#id_of_select_element option").filter(":selected").text();

42
2018-02-27 08:54



Si se encuentra en contexto de evento, en jQuery, puede recuperar el elemento de opción seleccionado usando:
$(this).find('option:selected') Me gusta esto :

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Editar

Como se menciona por PossessWithin, Mi respuesta solo responde a la pregunta: Cómo seleccionar la "Opción" seleccionada.

Luego, para obtener el valor de la opción, use option.val().


38
2017-07-09 15:30



¿Has considerado usar un simple javascript antiguo?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Ver también Obteniendo una opción texto / valor con JavaScript


28
2018-05-08 18:18



$('#aioConceptName option:selected').val();

17
2017-11-26 23:25



<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

10
2018-04-25 01:07



Leyendo el valor (no el texto) de un seleccionar:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Cómo deshabilitar una selección?  en ambas variantes, el valor se puede cambiar usando:

UN

El usuario no puede interactuar con el menú desplegable. Y él no sabe qué otras opciones podrían existir.

$('#Status').prop('disabled', true);

segundo

El usuario puede ver las opciones en el menú desplegable, pero todas están deshabilitadas:

$('#Status option').attr('disabled', true);

En este caso, $("#Status").val()  solo funcionará para las versiones de jQuery más pequeñas que 1.9.0. Todas las demás variantes funcionarán.

¿Cómo actualizar una selección desactivada?

Desde el código subyacente, aún puede actualizar el valor en su selección. Está deshabilitado solo para usuarios:

$("#Status").val(2);

En algunos casos, es posible que deba activar eventos:

$("#Status").val(2).change();

9
2018-06-01 15:38



Para cualquier persona que descubrió que la mejor respuesta no funciona.

Tratar de usar:

  $( "#aioConceptName option:selected" ).attr("value");

Funciona para mí en proyectos recientes, así que vale la pena mirarlo.


8
2018-01-29 12:37