jQuery erhält ausgewählten Optionswert (nicht den Text, sondern das Attribut 'Wert')

156

Okay, ich habe diesen Code:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Und ich möchte den Wert der ausgewählten Option erhalten. Beispiel: 'Option 2' ist ausgewählt und der Wert ist '2'. Die '2' ist der Wert, den ich bekommen muss und nicht 'Option 2'.

n00b
quelle
Demo-Tutorial zum Erhalten von: freakyjolly.com/… Demo-Tutorial zum Einstellen von freakyjolly.com/… Einzel- und Mehrfachauswahlbox
Code Spy

Antworten:

270

04/2020: Alte Antwort korrigiert

Verwenden Sie : Ausgewählter Pseudo-Selektor für die ausgewählten Optionen und verwenden Sie dann die .val- Funktion, um den Wert der Option abzurufen .

$('select[name=selector] option').filter(':selected').val()

Randnotiz : Die Verwendung des Filters ist besser als die Verwendung des :selectedSelektors direkt in der ersten Abfrage.

Wenn Sie sich in einem Änderungshandler befinden, können Sie einfach this.valueden ausgewählten Optionswert abrufen. Weitere Optionen finden Sie in der Demo.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

Alte Antwort:

Bearbeiten: Wie viele bereits betont haben, wird der ausgewählte Optionswert nicht zurückgegeben.

~~ Verwenden Sie .val , um den Wert der ausgewählten Option abzurufen . Siehe unten,

$('select[name=selector]').val()~~
Selvakumar Arumugam
quelle
5
Machen Sie $('select[name=selector]').change(function() { alert($(this).val()); });
Ihren
4
Beachten Sie, dass valuedie Bezeichnung (dh <option>label</option>) zurückgegeben wird , wenn für die ausgewählte Option kein Attribut angegeben ist . Könnte nicht immer das sein, was du willst. In den meisten Anwendungen wird natürlich der Wert angegeben.
Czechnology
115

Ich wollte nur meine Erfahrungen teilen

Für mich,

$('#selectorId').val()

gab null zurück.

Ich musste benutzen

$('#selectorId option:selected').val()

David Torres
quelle
1
War das ein browserspezifischer Fall? Hat die neueste Version von Chrome dies nicht zugelassen oder war es der IE, der dies nicht unterstützte?
Theodor Solbjørg
1
Es war in der neuesten Version von Chrome. Vielleicht auch in Firefox, aber nicht sicher.
David Torres
Ich bin $('#selectorId option:selected').val()mir nicht sicher, warum ich nicht gearbeitet habe. Stattdessen benutzte ich$('select option:selected').val()
Francisco Quintero
1
@Francisco Das Problem ist, dass $('select option:selected').val()der Wert des ersten Selektors im HTML-Code verwendet wird. Während mit können $('#selectorId option:selected').val()Sie den Wert des Selektors haben, den Sie angegeben haben. Überprüfen Sie, ob Tippfehler vorliegen. Hier ist ein Beispiel, das zeigt, was ich gerade gesagt habe: codepen.io/anon/pen/Nqgqyz
David Torres
22
$('select').change(function() {
    console.log($(this).val())
});​

jsFiddle Beispiel

.val() wird den Wert erhalten.

j08691
quelle
9

Sie müssen Ihrer Auswahl eine ID hinzufügen. Dann:
$('#selectorID').val()

Marcus
quelle
Ich habe die ID hinzugefügt, habe nur vergessen, sie hier hinzuzufügen.
n00b
1
Nach dem, was ich gelesen habe, ist die Verwendung einer ID als Selektor die schnellste Methode.
Marcus
5

Versuche dies:

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

oder

var data= $('select').find('option:selected').text();
Payal Mittal
quelle
4

Sie können jquerywie folgt verwenden

SKRIPT

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLE ist da

Usman
quelle
2

Für eine Auswahl wie diese

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

... Sie können die ID folgendermaßen erhalten:

$('#list-name option:selected').attr('id');

Oder Sie können stattdessen Wert verwenden und es auf einfache Weise erhalten ...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

so was:

$('#list-name').val();
Geziel Carvalho
quelle
2

Eine meiner Optionen hatte keinen Wert : <option>-----</option>. Ich habe versucht zu verwenden, if (!$(this).val()) { .. }aber ich habe seltsame Ergebnisse erzielt. Wenn Sie kein valueAttribut für Ihr <option>Element haben, wird der darin enthaltene Text anstelle einer leeren Zeichenfolge zurückgegeben. Wenn Sie val()für Ihre Option nichts zurückgeben möchten , stellen Sie sicher, dass Sie hinzufügen value="".

Gavin
quelle
0

Schau dir das Beispiel an:

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>
JH_
quelle
0
$('#selectorID').val();

ODER

$('select[name=selector]').val();

ODER

$('.class_nam').val();
Saddam Khan
quelle
@FarhadBagherlo "Tippe weiter" ist kein nützlicher Kommentar zum Bearbeiten! Bitte fassen Sie Ihre Änderungen zusammen, damit die Leser des Bearbeitungsverlaufs verstehen, was Sie getan haben, ohne jedes geänderte Zeichen zu überprüfen. Vielen Dank!
Jpaugh
0

Dieser Code funktioniert sehr gut für mich: Dies gibt den Wert der ausgewählten Option zurück. $ ('# select_id'). find ('option: selected'). val ();

Abolfazl Miadian
quelle
0
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });
Turan Zamanlı
quelle
Während dieser Code das Problem lösen könnte, ist es am besten, eine Ausarbeitung hinzuzufügen und zu erklären, wie es für Leute funktioniert, die diesen Code möglicherweise nicht verstehen.
paper1111
@ paper1111 das sind einfache Funktionen. Ich kann erklären, ob dies erforderlich ist. $ ('select [name = hier ist der Name des Auswahlfelds]) .change () - Funktion bedeutet, dass beim Ändern der Optionsfeldoption die Funktion funktioniert. $ (this) .val () - es gibt ausgewählten Optionswert zurück
Turan Zamanlı
0

Quelle Link -

Verwenden Sie jQuery val () auf GET ausgewählten Wert und und Text () Option Text zu erhalten.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

Ereignis bei Dropdown-Liste auswählen ändern

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

Schaltfläche Klicken

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });
Code Spy
quelle