Ottieni il valore selezionato dell'elemento di un menu a discesa usando jQuery


Come posso ottenere il valore selezionato di una casella a cascata usando jQuery?
Ho provato a usare

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

e

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

ma entrambi restituiscono una stringa vuota.


Answers



Per singoli elementi dom select, per ottenere il valore attualmente selezionato:

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

Per ottenere il testo attualmente selezionato:

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



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

Dovrebbe funzionare bene, vedere questo esempio:

$(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!" />




Prova questo jQuery,

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

o questo javascript,

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

Se è necessario accedere al valore e non al testo, provare a utilizzare il metodo val() anziché text() .

Controlla i seguenti collegamenti di violino.

Demo1 | Demo2




prova questo

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



So che questo è un post terribilmente vecchio e probabilmente dovrei essere frustato per questa pietosa risurrezione, ma ho pensato di condividere un paio di piccoli frammenti JS MOLTO utili che uso in tutte le applicazioni del mio arsenale ...

Se stai digitando:

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

sta invecchiando, prova ad aggiungere queste piccole crumpet al tuo file *.js globale:

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

e scrivi solo soval("#selector"); o sotext("#selector"); anziché! Diventa ancora più esperto combinando i due e restituendo un oggetto contenente sia il value che il text !

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

Mi fa risparmiare un sacco di tempo prezioso, specialmente su applicazioni pesanti!




Ancora un altro esempio testato:

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



questo farà il trucco

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



Questo avviserà il valore selezionato. Codice JQuery ...

$(document).ready(function () {

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

Codice HTML ...

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



Hai fornito il tuo elemento di selezione con un ID?

<select id='dropDownId'> ...

La tua prima affermazione dovrebbe funzionare!




Prova questo, ottiene il valore:

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




La tua prima affermazione dovrebbe funzionare !!

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

Restituirà il valore dell'elemento attualmente selezionato.




L' id generato per il controllo a discesa html sarà dinamico. Quindi usa l'id completo $('ct100_<Your control id>').val(). Funzionerà.




O se provassi:

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

L'ho usato oggi e funziona perfettamente.




uso

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

Questo dovrebbe funzionare :)




Per ottenere il valore jquery dal menu a tendina, basta usare la funzione below appena inviato id e ottenere il valore selezionato:

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



So che questo è vecchio, ma io aggiorno questo con una risposta più aggiornata

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

Spero che aiuti




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



utilizzare uno di questi codici

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

O

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



Questo è ciò che funziona

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



Per il testo selezionato utilizzare:

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

Per l'utilizzo del valore selezionato:

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



Puoi usare uno di questi:

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

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

            //OR

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

});



Basta usare questo

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



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

O

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

I codici sopra hanno funzionato bene per me




Devi metterlo così.

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



                $("#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>



Prova questo:

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

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