Ottieni il valore selezionato dell'elemento a discesa utilizzando jQuery

443

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

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

e

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

ma entrambi restituiscono una stringa vuota.

jquery

— Shyam
fonte

3

Entrambi dovrebbero funzionare. Il problema deve essere altrove (es. Quel codice è racchiuso in un $(document).ready(...blocco?)

— karim79

4

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

— formica

2

No: $('#dropDownId').val();è il modo più conciso per ottenere il valore selezionato.

— karim79,

1

@shyam non è necessario selezionare in questa istruzione poiché gli ID sono univoci per il documento, è necessario utilizzare il nome del tag solo quando si fa riferimento alle classi select#dropDownId option:selected,

— ant

possibile duplicato di Come ottenere l'indice di select-> tag opzione

— Chris Moschini

841

Per elementi dom selezionati singolarmente, per ottenere il valore attualmente selezionato:

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

Per ottenere il testo attualmente selezionato:

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

— Peter McG
fonte

11

Hai bisogno di uno spazio prima :selected.

— interjay

53

il modo più veloce per ottenere il testo dell'opzione selezionata è:$("#dropDownId").children("option").filter(":selected").text()

— RickardN

3

Vorrei che avessi riferimenti collegati a .val()e.text()

— shareef,

8

Richard, il tuo codice è troppo lungo ... può essere molto più conciso per la leggibilità

— Positivo

2

@ JamesM.Lay un riferimento DOM memorizzato in una variabile? Quindi utilizzarejQuery(domVariable).val()

— Allen Linatoc il

57

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

Dovrebbe funzionare bene, vedi 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!" />

Espandi frammento

— Nick Reeve
fonte

4

"valore" è ciò che manca alla maggior parte dei programmatori, mentre la dichiarazione di elementi e query continua invece a restituire il testo

— Asad

Guarda la demo qui freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— Codice spia

22

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 val()metodo anzichétext() .

Dai un'occhiata ai link per violino qui sotto.

Demo1 | Demo2

— fortunato
fonte

14

prova questo

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

— Kvadiyatar
fonte

OP richiede il valore selezionato. Questa risposta otterrebbe il contenuto testuale del menu a discesa. Non è sbagliato, non proprio quello che stava chiedendo.

— Joshua Dance,

12

So che questo è un post terribilmente vecchio e probabilmente dovrei essere frustato per questa pietosa resurrezione, ma ho pensato di condividere un paio di piccoli frammenti JS MOLTO utili che utilizzo in ogni applicazione del mio arsenale ...

Se si digita:

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

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

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

e basta scrivere soval("#selector");o sotext("#selector");invece! Diventa ancora più fantasioso combinando i due e restituendo un oggetto contenente sia il valueche 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!

— DevlshOne
fonte

9

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>

— Uthaiah
fonte

8

questo farà il trucco

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

— Singleton
fonte

8

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>

— J Slick
fonte

4

Prova questo, ottiene il valore:

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

— Ângelo Rigo
fonte

3

Hai fornito al tuo elemento selezionato un ID?

<select id='dropDownId'> ...

La tua prima affermazione dovrebbe funzionare!

— schaechtele
fonte

3

Per il testo selezionato usare:

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

Per il valore selezionato usare:

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

— mahi
fonte

2

Quello idche è stato generato per il tuo controllo a discesa in quello htmldinamico sarà quello. Quindi usa l'id completo Funzionerà $('ct100_<Your control id>').val()..

— VenkeHV
fonte

2

O se provassi:

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

L'ho usato oggi e funziona benissimo.

— Solido
fonte

2

uso

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

Questo dovrebbe funzionare :)

— Namila
fonte

2

Per ottenere il valore jquery dal menu a discesa basta usare la funzione sottostante appena inviata ide 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;
}

— Virendra khade
fonte

L'arduo modo di farlo, ma qualunque cosa funzioni.

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

Espandi frammento

— Sakhi Sudhan
fonte

1

So che è vecchio, ma ho pensato di aggiornarlo con una risposta più aggiornata

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

spero che questo possa essere d'aiuto

— mindmyweb
fonte

1

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

prova questo

— Rakesh
fonte

1

utilizzare uno di questi codici

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

O

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

— Bipin
fonte

1

Questo è ciò che funziona

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

— Shittu Joseph Olugbenga
fonte

1

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

O

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

I codici sopra hanno funzionato bene per me

— Stefan Kelchtermans
fonte

1

Puoi farlo usando il seguente codice.

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

Se vuoi ottenere il valore selezionato dalle opzioni dell'elenco di selezione. Questo farà il trucco.

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

— Dulith De Costa
fonte

0

Puoi usare uno di questi:

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

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

            //OR

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

});

— Suresh Burdak
fonte

0

Devi mettere così.

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

— Arthur Salgado
fonte

0

Prova questo:

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

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

— saravanajd
fonte

0

Utilizzare il metodo seguente per ottenere il valore selezionato al caricamento della pagina:

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

— UTHIRASAMY
fonte

0

Se hai più di un menu a discesa, prova:

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

Ti preghiamo di includere una spiegazione di come e perché questo risolva il problema aiuterebbe davvero a migliorare la qualità del tuo post e probabilmente darebbe più voti positivi.

— 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

questo dovrebbe funzionare per te

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

— Mohamed Ruzaik
fonte

Cosa succede se l'opzione a discesa è stata contrassegnata come selezionata a livello di codice (come da una richiesta Ajax che popola un menu a discesa)? Se provi a ottenere un .val (), otterrai null per il valore (anche se l'ispezione della sorgente ti mostrerà che l'opzione è, in effetti, selezionata)! $ ("opzione myDD: selezionato"). val () produrrà indefinito.

— MC9000,