jQuery Obtener la opción seleccionada del menú desplegable

Usualmente uso $("#id").val() para devolver el valor de la opción seleccionada, pero esta vez no funciona. La etiqueta seleccionada tiene el id 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>

preguntado el 18 de mayo de 12 a las 21:05

¿podrías mostrar el marcado del elemento? #aioConceptName -

es extraño porque funciona en este ejemplo jsfiddle.net/pAtVP, ¿estás seguro de que el evento se dispara en tu entorno? -

Un pensamiento tardío, pero .val() no funcionará a menos que configure el value atributo en esos <option>s, ¿verdad? -

Las versiones recientes de jQuery (probadas con 1.9.1) no tienen problemas con este marcado. Para el ejemplo anterior, $("#aioConceptName").val() devoluciones choose io. -

30 Respuestas

Para las opciones desplegables, probablemente desee algo como esto:

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

La razón val() no funciona porque hacer clic en una opción no cambia el valor del menú desplegable, solo agrega el :selected propiedad a la opción seleccionada que es una sus hijos del menú desplegable.

Respondido 25 Abr '13, 00:04

Ah, está bien, has actualizado tu pregunta con HTML. Esta respuesta ahora es irrelevante. Como una cuestión de hecho, .val() debería funcionar en su caso, debe tener un error en otro lugar. - Elliot Bonneville

para val() por qué no usar var conceptVal = $("#aioConceptName option").filter(":selected").val();? - Tester

¿Qué tal uno más simple? var conceptVal = $("#aioConceptName option:selected").val()? - Klemen Tusar

Todavía encontré esto útil para encontrar la opción seleccionada en una selección donde obtuve el menú desplegable anteriormente, por ejemplo, var mySelect = $('#mySelect'); /* ... ocurre más código ... */ var selectedText = mySelect.find(':selected').text(); - Charles Wood

En realidad, la razón por la que .val() no funciona para él es porque en realidad no le dio un valor a sus opciones, razón por la cual tiene que usar su método para recuperar el texto seleccionado, por lo que otra solución habría sido cambiar elige yo a elige yo Aunque su solución es probablemente más rápida y práctica, pensé que de todos modos lo diría para que comprenda mejor por qué no funcionó para él. - jordan laprise

Establecer 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, el value los atributos deben establecerse en cada <option>.

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

Respondido 11 Feb 16, 13:02

Advertencia: si no se selecciona ninguna opción, $('#aioConceptName').val() devuelve nulo/"indefinido" - Gordon

Esto me aseguró que $('#myselect').val() era correcto. ¡Me había olvidado tontamente de darle una identificación a la selección! - zapper

Una de mis opciones seleccionadas es un especial prompt opción <option>Please select an option</option>. En mi caso, no fue un problema agregar un atributo de valor en blanco <option value="">Please...</option> pero creo que en algunos casos no tener un atributo de valor tiene sentido. Pero +1 porque tu redacción vudú me hizo sonreír. - Cyril Duchon-Doris

No es val() seleccionar el value en lugar del texto dentro del option? es decir, selecciona 1 en lugar de roma. - cerradura

@deathlock Ese es el objetivo de .val(). Si está buscando manipular/usar el texto, use $(":selected).text() o establezca el valor y el texto para que sean iguales. - jacob valenta

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 sola vez y es más claro (mi opinión).

respondido 05 mar '13, 23:03

@JohnConde La respuesta aceptada en Meta no está de acuerdo contigo: meta.stackexchange.com/questions/87678/… . En mi opinión, Ed ha dado una buena respuesta y solo ha proporcionado una referencia adicional. - bruce

Pueden permitirlo, pero sigue siendo un mal recurso. John Conde

Se eliminó el enlace de w3schools, no era estrictamente necesario y una búsqueda en Google de "clases pseduo de jQuery" proporciona mucha información. - Ed Orsi

@EdOrsi: si bien guarda una llamada jQuery adicional, evita aprovechar el aumento de rendimiento proporcionado por el DOM nativo querySelectorAll() método (ver documentos de jQuery). Por lo tanto, debe ser más lento que el solución de eliot. - Alejandro Abakumov

Probablemente preferiría usar .find(':selected') ya que entonces le permite llamarlo desde una devolución de llamada adjunta a un evento ... como $('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); }); - Armstrongest

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();

Respondido 27 Feb 13, 08:02

Cuando usa el menú desplegable de selección múltiple, solo obtiene el primer valor: Thimira Pathirana

@ThimiraPathirana En ese caso, simplemente elimine la palabra "opción" de la consulta. - vladimir djuricic

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

$('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 poseer dentro, Mi respuesta solo responde a la pregunta: Cómo seleccionar la "Opción" seleccionada.

A continuación, para obtener el valor de la opción, utilice option.val().

contestado el 23 de mayo de 17 a las 11:05

¡Perfecto! Solo no olvides que debes agregar $(this).find('option:selected').val() al final para obtener el valor del elemento de opción, o $(this).find('option:selected').text() para obtener el texto. :) - diego fortes

¿Has considerado usar javascript simple y antiguo?

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

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

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

contestado el 23 de mayo de 17 a las 13:05

˗1 jQuery insuficiente - Hanshenrik

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

respondido 26 nov., 13:23

Esta es la mejor respuesta de todas, desearía que hubiera una forma de desbordamiento de pila para solicitar que se muestren las respuestas correctas en la parte superior. - herir

Leyendo el 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:

A

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

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

B

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

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

En este caso, $("#Status").val() solo funcionará para versiones de 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 subyacente, aún puede actualizar el valor en su selección. Está deshabilitado solo para los usuarios:

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

En algunos casos, es posible que deba activar eventos:

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

respondido 06 nov., 17:06

Cuando usa el menú desplegable de selección múltiple, solo obtiene el primer valor: Thimira Pathirana

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 sobre esta respuesta en esta publicación

Respondido 02 Oct 18, 15:10

Para una buena práctica necesitas usar val() para obtener el valor de las opciones seleccionadas no text().

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

Puedes usar el

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

Or

   $("#aioConceptName :selected").val();

Respondido el 17 de Septiembre de 21 a las 07:09

para encontrar las selecciones correctas con jQuery, tenga en cuenta que varias selecciones pueden estar disponibles en los árboles html y confundir el resultado esperado.

(:selected).val() or (:selected).text()no funciona correctamente en múltiples opciones de selección. Entonces mantenemos una matriz de todas las selecciones primero como .map() podría hacer y luego devolver el argumento o texto deseado.

El siguiente ejemplo ilustra esos problemas y ofrece un mejor enfoque.

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

ver las diferentes salidas propensas a errores en la variante a, b en comparación con el funcionamiento correcto CD que mantienen todas las selecciones en una matriz y luego devuelven lo que busca.

Respondido el 27 de Septiembre de 21 a las 14:09

Usando jQuery, simplemente 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'))
});

Respondido 23 Jul 14, 06:07

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

El método .val() se usa principalmente para obtener los valores de los elementos del formulario, como input, select y textarea. En el caso de elementos seleccionados, devuelve null cuando 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 la multiple el atributo 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>

Respondido 08 Feb 15, 14:02

Contamos con JQuery:

  1. Si desea obtener la opción seleccionada texto, puedes usar $(select element).text().

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

  2. Si desea obtener la opción seleccionada propuesta de, puedes usar $(select element).val().

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

    Asegúrate de configurar value atributo en <option> etiqueta, como:

    <select id="aioConceptName">
      <option value="">choose io</option>
      <option value="roma(value)">roma(text)</option>
      <option value="totti(value)">totti(text)</option>
    </select>
    

Con este ejemplo de código HTML, asumiendo se selecciona la última opción:

  1. var texto Te regalaré totti(text)
  2. valor var Te regalaré totti(value)

$(document).on('change','#aioConceptName' ,function(){
  var val = $('#aioConceptName option:selected').val();
  var text = $('#aioConceptName option:selected').text();
  $('.result').text("Select Value = " + val);
  $('.result').append("<br>Select Text = " + text);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
 <option value="io(value)">choose io</option>
 <option value="roma(value)">roma(text)</option>
 <option value="totti(value)">totti(text)</option>
</select>

<p class="result"></p>

respondido 21 nov., 21:08

Para cualquiera que haya descubierto 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.

respondido 30 mar '14, 11:03

Solo esto debería funcionar:

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

respondido 17 nov., 14:13

Directo y bastante fácil:

tu menú desplegable

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

Código jquery 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.
});

respondido 21 nov., 18:09

Olvidar propuesta de de etiqueta seleccionada:

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

Y si quieres conseguir texto usa 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>

Respondido el 20 de junio de 20 a las 11:06

Puedes intentar depurarlo de esta manera:

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

Respondido 27 Jul 18, 13:07

Espero que esto también ayude a entender 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));
});

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

Respondido 09 Feb 20, 10:02

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

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

Respondido 27 Oct 16, 01:10

Esta es solo una solución parcial; también es necesario establecer el valor para cada opción; esto ya está cubierto por la respuesta de Jacob Valetta: David

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

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

Respondido el 04 de enero de 20 a las 16:01

var selectedaioConceptName = $('#aioConceptName option:selected').val(); es mejor que usar otro find() - sadee

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

respondido 15 nov., 17:00

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

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

Respondido el 10 de junio de 19 a las 11:06

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

contestado el 07 de mayo de 18 a las 12:05

Usted tenía razón; sin embargo, se relacionó con el texto, la pregunta está mal. - federico navarrete

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

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

Respondido el 26 de Septiembre de 18 a las 12:09

Trata

aioConceptName.selectedOptions[0].value

let val = aioConceptName.selectedOptions[0].value

console.log('selected value:',val);
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Respondido el 21 de junio de 20 a las 18:06

esta vainilla js, pregunta hecha específicamente para la solución jQuery. - Aurovrata

Solo hay una forma correcta de encontrar la opción seleccionada: por option value atributo. Así que toma el código simple:

//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );

Así que si tienes una lista como esta:

<select id="#mySelect" >
  <option value="value1" >First option</option>
  <option value="value2" >Second option</option>
  <option value="value3" selected >Third option</option>
</select>

Si utiliza selected atributo para option, entonces find(":selected") dará un resultado incorrecto porque selected el atributo permanecerá en option para siempre, incluso el usuario selecciona otra opción.

Incluso si el usuario selecciona la primera o la segunda opción, el resultado de $("seleccionar opción:seleccionado") dará dos elementos! Entonces $("select:selected").text() dará un resultado como "Primera opción Tercera opción"

Así que usa value selector de atributos y no te olvides de configurar value atributo para todas las opciones!

contestado el 17 de mayo de 21 a las 06:05

Probablemente su mejor apuesta con este tipo de escenario es usar método de cambio de jQuery para encontrar el valor actualmente seleccionado, así:

$('#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 determinado.

Espero que ayude!

Respondido 03 Abr '18, 09:04

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

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

Mientras que a continuación le dará valor.

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

Respondido 11 Jul 18, 06:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.