Obtenga el valor seleccionado de un elemento desplegable usando jQuery

443

¿Cómo puedo obtener el valor seleccionado de un cuadro desplegable usando jQuery?
Traté de usar

var value = $('#dropDownId').val();

y

var value = $('select#dropDownId option:selected').val();

pero ambos devuelven una cadena vacía.

jquery

— shyam
fuente

3

Ambos deberían funcionar. El problema debe estar en otro lugar (por ejemplo, ¿está ese código envuelto en un $(document).ready(...bloque?)

— karim79

44

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

— hormiga

2

No: $('#dropDownId').val();es la forma más concisa de obtener el valor seleccionado.

— karim79

1

@shyam no es necesario seleccionar en esta afirmación, ya que los identificadores son únicos para el documento, debe utilizar nombre de la etiqueta cuando se refiere a las clases select#dropDownId option:selected,

— hormiga

posible duplicado de Cómo obtener el índice de la etiqueta select-> option

— Chris Moschini

840

Para elementos dom de selección única, para obtener el valor seleccionado actualmente:

$('#dropDownId').val();

Para obtener el texto seleccionado actualmente:

$('#dropDownId :selected').text();

— Peter McG
fuente

11

Necesitas un espacio antes :selected.

— Interjay

53

la forma más rápida de obtener el texto de la opción seleccionada es:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

desearía que hubieras vinculado referencias a .val()y.text()

— shareef

8

Richard, tu código es demasiado largo ... puede ser mucho más conciso para facilitar la lectura

— PositiveGuy

2

@ JamesM. ¿Puede una referencia DOM almacenada en una variable? Luego usejQuery(domVariable).val()

— Allen Linatoc

57

var value = $('#dropDownId:selected').text()

Debería funcionar bien, vea este ejemplo:

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

Expandir fragmento

— Nick Reeve
fuente

44

"valor" es lo que la mayoría de los codificadores pierden, mientras que la declaración de elementos y consultas sigue devolviendo texto en su lugar

— Asad

Ver demo aquí freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Code Spy

22

Prueba este jQuery,

$("#ddlid option:selected").text();

o este javascript,

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

Si necesita acceder al valor y no al texto, intente usar el val()método en lugar detext() .

Echa un vistazo a los siguientes enlaces de violín.

Demo1 | Demo2

— Lucky
fuente

14

prueba esto

$("#yourDropdown option:selected").text();

— Kvadiyatar
fuente

OP está pidiendo el valor seleccionado. Esta respuesta obtendría el contenido de texto del menú desplegable. No está mal, simplemente no es lo que estaba pidiendo.

— Joshua Dance

12

Sé que esta es una publicación terriblemente antigua y probablemente debería ser azotado por esta lamentable resurrección, pero pensé que compartiría un par de pequeños fragmentos JS muy útiles que uso en todas las aplicaciones de mi arsenal ...

Si escribe:

$("#selector option:selected").val() // or
$("#selector option:selected").text()

está envejeciendo, intente agregar estas pequeñas bolitas a su *.jsarchivo global :

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

y solo escribe soval("#selector");o en su sotext("#selector");lugar! Obtenga aún más elaborado mediante la combinación de los dos y devolver un objeto que contiene tanto el valuey el text!

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

¡Me ahorra un montón de tiempo precioso, especialmente en aplicaciones con mucho peso!

— DevlshOne
fuente

9

Esto alertará al valor seleccionado. Código JQuery ...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

Código HTML...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>

— Uthaiah
fuente

8

esto hará el truco

$('#dropDownId').val();

— único
fuente

8

Sin embargo, otro ejemplo probado:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

— J Slick
fuente

4

Pruebe esto, obtiene el valor:

$('select#myField').find('option:selected').val();

— Ângelo Rigo
fuente

3

¿Proporcionó a su elemento select con una identificación?

<select id='dropDownId'> ...

¡Tu primera declaración debería funcionar!

— schaechtele
fuente

3

Para el uso de texto seleccionado:

value: $('#dropDownId :selected').text();

Para el valor seleccionado use:

value: $('#dropDownId').val();

— mahi
fuente

2

El idque se generó para su control desplegable en el htmlserá dinámico. Entonces use la identificación completa $('ct100_<Your control id>').val().Funcionará.

— VenkeHV
fuente

2

O si lo intentaras:

$("#foo").find("select[name=bar]").val();

Lo usé hoy y funciona bien.

— Sólido
fuente

2

utilizar

$('#dropDownId').find('option:selected').val()

Esto debería funcionar :)

— Namila
fuente

2

Para obtener el valor de jquery del menú desplegable, solo use la función a continuación que acaba de enviar idy obtenga el valor seleccionado:

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}

— Virendra khade
fuente

La ardua forma de hacerlo, pero lo que sea que funcione.

— MC9000

2

	function fundrp(){
	var text_value = $("#drpboxid option:selected").text();  
	console.log(text_value);
	var val_text = $("#drpboxid option:selected").val();  
	console.log(val_text);
	var value_text = $("#drpboxid option:selected").attr("vlaue") ;
	console.log(value_text);
	var get_att_value = $("#drpboxid option:selected").attr("id") 
	console.log(get_att_value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
	<option id="1_one" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

Expandir fragmento

— sakthi sudhan
fuente

1

Sé que esto es viejo, pero pensé que lo actualicé con una respuesta más actualizada

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

espero que esto ayude

— mindmyweb
fuente

1

$("select[id$=dropDownId]").val()

prueba esto

— Rakesh
fuente

1

usa cualquiera de estos códigos

$('#dropDownId :selected').text();

O

$('#dropDownId').text();

— Bipin
fuente

1

Esto es lo que funciona

    var value= $('option:selected', $('#dropDownId')).val();

— Shittu Joseph Olugbenga
fuente

1

$("#selector <b>></b> option:selected").val()

O

$("#selector <b>></b> option:selected").text()

Los códigos anteriores me funcionaron bien

— Stefan Kelchtermans
fuente

1

Puede hacer esto usando el siguiente código.

$('#dropDownId').val();

Si desea obtener el valor seleccionado de las opciones de la lista de selección. Esto hará el truco.

$('#dropDownId option:selected').text();

— Dulith De Costa
fuente

0

Puedes usar cualquiera de estos:

$(document).on('change', 'select#dropDownId', function(){

            var value = $('select#dropDownId option:selected').text();

            //OR

            var value = $(this).val();

});

— Suresh Burdak
fuente

0

Tienes que poner así.

$('[id$=dropDownId] option:selected').val();

— Arthur Salgado
fuente

0

Prueba esto:

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();

— saravanajd
fuente

0

Utilice el siguiente método para obtener el valor seleccionado en la carga de la página:

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

— UTHIRASAMY
fuente

0

Si tiene más de un menú desplegable, intente:

HTML:

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript:

    function myFunction(sel) {
        var selected = sel.value;
    }

— RGriffiths
fuente

0

HTML:

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>

JavaScript:

var value = $('#SecondSelect')[0].value;

— Mahdi Hosseini
fuente

Incluya una explicación de cómo y por qué esto resuelve el problema realmente ayudaría a mejorar la calidad de su publicación, y probablemente resultaría en más votos positivos.

— Android

-1

$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>

— Muddassir Irahad
fuente

-1

esto debería funcionar para ti

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

— Mohamed Ruzaik
fuente

¿Qué sucede si su opción desplegable se marcó como seleccionada mediante programación (como una solicitud ajax que completa un menú desplegable)? Si intentas obtener un .val (), obtendrás un valor nulo (¡aunque inspeccionar la fuente te mostrará que la opción está, de hecho, seleccionada)! $ ("opción myDD: seleccionado"). val () dará como resultado indefinido.

— MC9000