jQuery Obtener la opción seleccionada del menú desplegable

Por lo general, utilizo $("#id").val()para devolver el valor de la opción seleccionada, pero esta vez no funciona. La etiqueta seleccionada tiene la identificaciónaioConceptName

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>

Para las opciones desplegables, probablemente desee algo como esto:

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

La razón por la val()que no funciona es porque hacer clic en una opción no cambia el valor del menú desplegable, solo agrega la :selectedpropiedad a la opción seleccionada, que es un elemento secundario del menú desplegable.

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 valueatributo Para que funcione correctamente, los valueatributos deben establecerse en cada uno <option>.

Ahora puede llamar en $('#aioConceptName').val()lugar de que todo este :selectedvudú sea sugerido por otros.

Me topé 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).

Prueba esto por valor ...

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

o esto para el texto ...

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

Si está en contexto de evento, en jQuery, puede recuperar el elemento de opción seleccionado usando:
$(this).find('option:selected')así:

$('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 mencionó 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().

¿Has considerado usar javascript antiguo simple?

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

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

Consulte también Obtener un texto / valor de opción con JavaScript

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

Lectura del valor (no el texto) de una selección:

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:

UNA

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

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

si

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 versiones jQuery más pequeñas que 1.9.0. Todas las demás variantes funcionarán.

¿Cómo actualizar una selección deshabilitada?

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

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

En algunos casos, es posible que necesite disparar eventos:

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

<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>

deberías usar esta sintaxis:

var value = $('#Id :selected').val();

Así que prueba este código:

var values = $('#aioConceptName :selected').val();

Puedes probar en Fiddle: http://jsfiddle.net/PJT6r/9/

ver acerca de esta respuesta en esta publicación

Usando jQuery, solo agregue un change evento y obtenga el valor o texto seleccionado dentro de ese controlador.

Si necesita texto seleccionado, utilice este código:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

O si necesita un valor seleccionado, utilice este código:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

Use la jQuery.val()función para seleccionar elementos también:

El método .val () se usa principalmente para obtener los valores de elementos de formulario como input, select y textarea. En el caso de los elementos seleccionados, regresa nullcuando no se selecciona ninguna opción y una matriz que contiene el valor de cada opción seleccionada cuando hay al menos una y es posible seleccionar más porque el multipleatributo está presente.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Para cualquiera que descubrió que la mejor respuesta no funciona.

Tratar de usar:

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

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

Solo esto debería funcionar:

var conceptName = $('#aioConceptName').val();

Directo y bastante fácil:

Su menú desplegable

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Jquery code para obtener el valor seleccionado

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

Puede intentar depurarlo de esta manera:

console.log($('#aioConceptName option:selected').val())

Para obtener el valor de la etiqueta seleccionada:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

Y si desea obtener texto, use este código:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Por ejemplo:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Si desea obtener el atributo 'valor' en lugar del nodo de texto, esto funcionará para usted:

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

intenta con este

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Imagine el DDL como una matriz con índices, está seleccionando un índice. Elija el que desea configurar con su JS.

Espero que esto también ayude a comprender mejor y ayude a probar esto a continuación,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

para más detalles, por favor http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Puedes usar $("#drpList").val();

para obtener una selección con la misma clase = nombre, puede hacer esto, para verificar si se selecciona una opción de selección.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

Tuve el mismo problema y descubrí por qué no funcionaba en mi caso.
La página html se dividió en diferentes fragmentos html y descubrí que tengo otro campo de entrada que lleva el mismo Id del select, lo que hacía que el val()estuviera siempre vacío.
Espero que esto salve el día para cualquiera que tenga un problema similar.

para usar $ ("# id"). val, debe agregar un valor a la opción como esta:

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

de lo contrario, puede usar

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

Deseo que eso ayude ...

Aquí está la solución simple para este problema.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Probablemente su mejor apuesta con este tipo de escenario es utilizar el método de cambio de jQuery para encontrar el valor seleccionado actualmente, de esta manera:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Prefiero este método porque luego puede realizar funciones para cada opción seleccionada en un campo de selección dado.

¡Espero que ayude!

Por lo general, necesitaría no solo obtener el valor seleccionado, sino también ejecutar alguna acción. Entonces, ¿por qué no evitar toda la magia jQuery y simplemente pasar el valor seleccionado como argumento a la llamada a la acción?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

Puede seleccionar usando la opción exacta seleccionada: a continuación le dará innerText

$("select#aioConceptName > option:selected").text()

Mientras que a continuación le dará valor.

$("select#aioConceptName > option:selected").val()