web-dev-qa-db-de.com

Rufen Sie mit jQuery den ausgewählten Wert eines Dropdown-Elements ab

Wie kann ich den ausgewählten Wert einer Dropdown-Box mit jQuery abrufen?
Ich versuchte es mit

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

und

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

aber beide geben einen leeren String zurück.

401
shyam

Für einzelne Select-Dom-Elemente, um den aktuell ausgewählten Wert abzurufen:

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

So rufen Sie den aktuell ausgewählten Text ab:

$('#dropDownId :selected').text();
766
Peter McG
var value = $('#dropDownId:selected').text()

Sollte gut funktionieren, siehe folgendes Beispiel:

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

57
Nick Reeve

Versuchen Sie diese JQuery,

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

oder dieses Javascript,

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

Wenn Sie auf den Wert und nicht auf den Text zugreifen müssen, verwenden Sie die val()-Methode anstelle von text().

Schauen Sie sich die untenstehenden Links an.

Demo1 | Demo2

20
Lucky

versuche dies

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

Ich weiß, dass dies ein schrecklich alter Beitrag ist und ich sollte wahrscheinlich für diese erbärmliche Auferstehung ausgepeitscht werden, aber ich dachte, ich würde ein paar sehr nützliche kleine JS-Schnipsel teilen, die ich in jeder Anwendung in meinem Arsenal verwende ...

Bei der Eingabe:

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

alt wird, versuchen Sie, diese kleinen Crumpets zu Ihrer globalen *.js-Datei hinzuzufügen:

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

und schreiben Sie stattdessen einfach soval("#selector"); oder sotext("#selector");! Werden Sie noch schicker, indem Sie die beiden kombinieren und ein Objekt zurückgeben, das sowohl die value als auch die text enthält!

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

Das spart mir eine Menge wertvolle Zeit, besonders bei formlastigen Anwendungen!

12
DevlshOne

Dadurch wird der ausgewählte Wert alarmiert. JQuery-Code ...

$(document).ready(function () {

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

HTML Quelltext...

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

Noch ein weiteres geprüftes Beispiel:

<!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>
8
J Slick

das wird den Trick tun 

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

Für ausgewählten Text verwenden:

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

Für ausgewählten Wert verwenden Sie:

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

Versuchen Sie dies, es wird der Wert:

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

3
Ângelo Rigo

Haben Sie Ihr select-Element mit einer ID versehen?

<select id='dropDownId'> ...

Ihre erste Aussage sollte funktionieren!

3
schaechtele

benutzen

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

Das sollte funktionieren :)

2
Namila

Oder wenn Sie es versuchen würden:

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

Ich habe es heute benutzt und es funktioniert gut.

2
SoLiD

Die id, die für Ihr Dropdown-Steuerelement in der html generiert wurde, ist dynamisch. Verwenden Sie also die vollständige ID $('ct100_<Your control id>').val().. Es wird funktionieren. 

2
VenkeHV

Um den Jquery-Wert aus dem Dropdown-Menü abzurufen, verwenden Sie einfach die unten gesendete Funktion, id, und erhalten den ausgewählten Wert:

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;
}
2
Virendra khade

	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>

1
sakthi sudhan

Das funktioniert 

    var value= $('option:selected', $('#dropDownId')).val();
$("#selector <b>></b> option:selected").val()

Oder

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

Die obigen Codes haben für mich gut funktioniert

1

Ich weiß, das ist alt, aber ich aktualisiere es mit einer aktuelleren Antwort 

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

Ich hoffe das hilft

1
mindmyweb

verwenden Sie einen dieser Codes 

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

OR

$('#dropDownId').text();
1
Bipin
$("select[id$=dropDownId]").val()
  • versuche dies
1
rakesh

Sie müssen so setzen.

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

Sie können eine der folgenden verwenden:

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

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

            //OR

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

});
0
Suresh Burdak

Sie können dies tun, indem Sie folgenden Code verwenden.

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

Wenn Sie den ausgewählten Wert aus den Optionen der Auswahlliste erhalten möchten. Das wird den Trick tun.

$('#dropDownId option:selected').text();
0
Dulith De Costa

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;
0
mahdi hosseini

Wenn Sie mehr als eine Dropdown-Liste haben, versuchen Sie Folgendes:

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

Verwenden Sie die nachstehende Methode, um den ausgewählten Wert beim Laden der Seite abzurufen:

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

Versuche dies:

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

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