Obter o valor selecionado do item de uma lista suspensa usando jQuery

443

Como posso obter o valor selecionado de uma caixa suspensa usando o jQuery?
Eu tentei usar

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

e

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

mas ambos retornam uma string vazia.

jquery

— shyam
fonte

3

Ambos devem funcionar. O problema deve estar em outro lugar (por exemplo, é que o código envolvido em um $(document).ready(...bloco?)

— karim79

4

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

— form

2

Não - $('#dropDownId').val();é a maneira mais concisa de obter o valor selecionado.

— Karim79

1

@shyam você não precisa selecionar nesta declaração desde IDs são exclusivos para documento, você deve usar o nome tag somente quando referindo-se a classes select#dropDownId option:selected,

— formiga

possível duplicata Como obter o Índice de Select-> tag opção

— Chris Moschini

840

Para elementos dom de seleção única, para obter o valor atualmente selecionado:

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

Para obter o texto atualmente selecionado:

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

— Peter McG
fonte

11

Você precisa de um espaço antes :selected.

— interjay

53

a maneira mais rápida de obter o texto da opção selecionada é:$("#dropDownId").children("option").filter(":selected").text()

— RickardN 21/03

3

eu desejo que você tinha ligado referências a .val()e.text()

— shareef

8

Richard, seu código é muito longo ... pode ser muito mais conciso quanto à legibilidade

— PositiveGuy

2

@ JamesM.Lay uma referência DOM armazenada em uma variável? Em seguida, usejQuery(domVariable).val()

— Allen Linatoc

57

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

Deve funcionar bem, veja este exemplo:

$(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 snippet

— Nick Reeve
fonte

4

"valor" é o que a maioria dos codificadores perca, ao declarar consulta elementsand mantém ao voltar de texto em vez

— Asad

Confira a demonstração aqui freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Code Spy

22

Experimente este jQuery,

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

ou esse javascript,

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

Se você precisar acessar o valor e não o texto, tente usar o val()método em vez de text().

Confira os links de violino abaixo.

Demo1 | Demo2

— sortudos
fonte

14

tente isso

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

— Kvadiyatar
fonte

O OP está pedindo o valor selecionado. Esta resposta obteria o conteúdo do texto da lista suspensa. Não está errado, apenas não o que ele estava pedindo.

— Joshua Dance

12

Sei que este é um post muito antigo e provavelmente deveria ser açoitado por essa ressurreição lamentável, mas pensei em compartilhar alguns trechos JS muito MUITO úteis que uso em todas as aplicações do meu arsenal ...

Se digitar:

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

está envelhecendo, tente adicionar esses pequenos bolinhos ao seu *.jsarquivo global :

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

e apenas escreva soval("#selector");ou em sotext("#selector");vez disso! Fique ainda mais elegante combinando os dois e retornando um objeto que contém tanto o valuequanto o text!

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

Isso me poupa uma tonelada de tempo precioso, especialmente em aplicações de formulários pesados!

— DevlshOne
fonte

9

Isso alertará o valor selecionado. 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
fonte

8

Isto irá fazer o truque

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

— Singleton
fonte

8

Outro exemplo testado:

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

4

Tente isso, ele obtém o valor:

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

— Ângelo Rigo
fonte

3

Você forneceu um ID ao seu elemento de seleção?

<select id='dropDownId'> ...

Sua primeira declaração deve funcionar!

— schaechtele
fonte

3

Para o texto selecionado, use:

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

Para o valor selecionado, use:

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

— mahi
fonte

2

O idque foi gerado para o seu controle suspenso no htmlserá dinâmico. Portanto, use a identificação completa. $('ct100_<Your control id>').val().Funcionará.

— VenkeHV
fonte

2

Ou se você tentasse:

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

Eu usei hoje e está funcionando bem.

— Sólido
fonte

2

usar

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

Isso deve funcionar :)

— Namila
fonte

2

Para obter o valor do jquery no menu suspenso, basta usar a função abaixo enviada ide obter o valor selecionado:

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
fonte

A maneira árdua de fazer isso, mas o que funciona.

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

— sakthi sudhan
fonte

1

Eu sei que isso é antigo, mas eu o atualizo com uma resposta mais atualizada

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

Eu espero que isso ajude

— mindmyweb
fonte

1

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

tente isso

— rakesh
fonte

1

use um desses códigos

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

OU

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

— Bipin
fonte

1

É isso que funciona

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

— Shittu Joseph Olugbenga
fonte

1

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

Ou

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

Os códigos acima funcionaram bem para mim

— Stefan Kelchtermans
fonte

1

Você pode fazer isso usando o seguinte código.

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

Se você deseja obter o valor selecionado nas opções da lista de seleção. Isto irá fazer o truque.

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

— Dulith De Costa
fonte

0

Você pode usar qualquer um destes:

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

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

            //OR

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

});

— Suresh Burdak
fonte

0

Você precisa colocar assim.

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

— Arthur Salgado
fonte

0

Tente o seguinte:

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

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

— saravanajd
fonte

0

Use o método abaixo para obter o valor selecionado no carregamento da página:

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

— UTHIRASAMY
fonte

0

Se você tiver mais de uma lista suspensa, tente:

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
fonte

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
fonte

Inclua uma explicação de como e por que isso resolve o problema realmente ajudaria a melhorar a qualidade da sua postagem e provavelmente resultará em mais 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
fonte

-1

isso deve funcionar para você

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

— mohamed ruzaik
fonte

E se sua opção suspensa foi marcada como selecionada programaticamente (como em uma solicitação ajax que preenche uma lista suspensa)? Se você tentar obter um .val (), será nulo o valor (mesmo que a inspeção da fonte mostre que a opção está realmente selecionada)! $ ("opção myDD: selecionada"). val () produzirá indefinido.

— MC9000