jQuery Ausgewählte Option aus Dropdown-Liste abrufen

Normalerweise verwende ich $("#id").val(), um den Wert der ausgewählten Option zurückzugeben, aber diesmal funktioniert es nicht. Das ausgewählte Tag hat die IDaioConceptName

HTML Quelltext

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Für Dropdown-Optionen möchten Sie wahrscheinlich Folgendes:

var conceptName = $('#aioConceptName').find(":selected").text();

Der Grund , val()nicht den Trick zu tun ist , weil eine Option klicken , nicht den Wert des Dropdown ändern - es kommt noch hinzu, die :selectedEigenschaft der gewählten Option , die ist ein Kind der Dropdown - Liste.

Stellen Sie die Werte für jede der Optionen ein

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()hat nicht funktioniert, weil die .val()zurückgibtvalue Attribut zurückgegeben wird. Damit es richtig funktioniert, müssen die valueAttribute für jedes festgelegt werden<option> .

Jetzt können Sie anrufen, $('#aioConceptName').val()anstatt dass all dieses :selectedVoodoo von anderen vorgeschlagen wird.

Ich stolperte über diese Frage und entwickelte eine präzisere Version von Elliot BOnnevilles Antwort:

var conceptName = $('#aioConceptName :selected').text();

oder generisch:

$('#id :pseudoclass')

Dies erspart Ihnen einen zusätzlichen jQuery-Aufruf, wählt alles auf einmal aus und ist klarer (meiner Meinung nach).

Versuchen Sie dies für Wert ...

$("select#id_of_select_element option").filter(":selected").val();

oder dies für Text ...

$("select#id_of_select_element option").filter(":selected").text();

Wenn Sie sich im Ereigniskontext befinden, können Sie in jQuery das ausgewählte Optionselement abrufen, indem Sie Folgendes verwenden
$(this).find('option:selected'):

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Bearbeiten

Wie von PossessWithin erwähnt , beantwortet meine Antwort nur die Frage: Wie wähle ich die ausgewählte "Option" aus ?

Verwenden Sie als Nächstes, um den Optionswert abzurufen option.val().

Haben Sie darüber nachgedacht, einfaches altes Javascript zu verwenden?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Siehe auch Abrufen eines Optionstextes / -werts mit JavaScript

$('#aioConceptName option:selected').val();

Lesen des Werts (nicht des Textes) einer Auswahl:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Wie deaktiviere ich eine Auswahl? In beiden Varianten kann der Wert geändert werden mit:

EIN

Der Benutzer kann nicht mit dem Dropdown interagieren. Und er weiß nicht, welche anderen Optionen es geben könnte.

$('#Status').prop('disabled', true);

B.

Der Benutzer kann die Optionen in der Dropdown-Liste sehen, aber alle sind deaktiviert:

$('#Status option').attr('disabled', true);

In diesem Fall $("#Status").val() funktioniert dies nur für jQuery-Versionen, die kleiner als sind1.9.0 . Alle anderen Varianten funktionieren.

Wie aktualisiere ich eine deaktivierte Auswahl?

Über den Code dahinter können Sie den Wert in Ihrer Auswahl weiterhin aktualisieren. Es ist nur für Benutzer deaktiviert:

$("#Status").val(2);

In einigen Fällen müssen Sie möglicherweise Ereignisse auslösen:

$("#Status").val(2).change();

<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

Sie sollten diese Syntax verwenden:

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

Probieren Sie diesen Code aus:

var values = $('#aioConceptName :selected').val();

Sie können in Fiddle testen: http://jsfiddle.net/PJT6r/9/

Siehe zu dieser Antwort in diesem Beitrag

Fügen Sie mit jQuery einfach ein changeEreignis hinzu und rufen Sie den ausgewählten Wert oder Text in diesem Handler ab.

Wenn Sie ausgewählten Text benötigen, verwenden Sie bitte diesen Code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Oder wenn Sie einen ausgewählten Wert benötigen, verwenden Sie bitte diesen Code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

Verwenden Sie die jQuery.val()Funktion auch für ausgewählte Elemente:

Die .val () -Methode wird hauptsächlich verwendet, um die Werte von Formularelementen wie Eingabe, Auswahl und Textbereich abzurufen. Bei ausgewählten Elementen wird zurückgegeben, nullwenn keine Option ausgewählt ist, und ein Array, das den Wert jeder ausgewählten Option enthält, wenn mindestens eine vorhanden ist, und es ist möglich, mehr auszuwählen, da das multipleAttribut vorhanden ist.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Für alle, die herausgefunden haben, dass die beste Antwort nicht funktioniert.

Versuchen zu benutzen:

  $( "#aioConceptName option:selected" ).attr("value");

Funktioniert für mich in den letzten Projekten, daher lohnt es sich, einen Blick darauf zu werfen.

Genau das sollte funktionieren:

var conceptName = $('#aioConceptName').val();

Einfach und ziemlich einfach:

Dein Dropdown

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Abfragecode, um den ausgewählten Wert abzurufen

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});

Sie können versuchen, es folgendermaßen zu debuggen:

console.log($('#aioConceptName option:selected').val())

Um den Wert des ausgewählten Tags abzurufen:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

Und wenn Sie Text erhalten möchten, verwenden Sie diesen Code:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Zum Beispiel:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Wenn Sie das Attribut 'value' anstelle des Textknotens abrufen möchten, funktioniert dies für Sie:

var conceptName = $('#aioConceptName').find(":selected").attr('value');

versuche es mit diesem

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Stellen Sie sich die DDL als Array mit Indizes vor. Sie wählen einen Index aus. Wählen Sie diejenige aus, auf die Sie sie mit Ihrem JS einstellen möchten.

Ich hoffe, dies hilft auch, besser zu verstehen und dies unten zu versuchen.

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

Für weitere Informationen besuchen Sie bitte http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Sie können verwenden $("#drpList").val();

Um eine Auswahl mit demselben Klassennamen abzurufen, können Sie dies tun, um zu überprüfen, ob eine Auswahloption ausgewählt ist.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});

Ich hatte das gleiche Problem und fand heraus, warum es in meinem Fall nicht funktionierte.
Die HTML-Seite wurde in verschiedene HTML-Fragmente unterteilt und ich stellte fest, dass ich ein anderes Eingabefeld habe, das dieselbe ID von enthält select, was dazu führte, dass das Feld val()immer leer war
Ich hoffe, dies spart den Tag für alle, die ähnliche Probleme haben.

Um $ ("# id"). val zu verwenden, sollten Sie der folgenden Option einen Wert hinzufügen:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

sonst können Sie verwenden

   $("#aioConceptName").find(':selected').text();

Ich wünschte das hilft ..

Hier ist die einfache Lösung für dieses Problem.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Bei dieser Art von Szenario ist es wahrscheinlich am besten, die Änderungsmethode von jQuery zu verwenden , um den aktuell ausgewählten Wert zu ermitteln.

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Ich bevorzuge diese Methode, weil Sie dann Funktionen für jede ausgewählte Option in einem bestimmten Auswahlfeld ausführen können.

Ich hoffe, das hilft!

Normalerweise müssen Sie nicht nur den ausgewählten Wert abrufen, sondern auch eine Aktion ausführen. Warum also nicht die ganze jQuery-Magie vermeiden und den ausgewählten Wert einfach als Argument an den Aktionsaufruf übergeben?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>

Sie können mit der genau ausgewählten Option auswählen: Unten wird innerText angezeigt

$("select#aioConceptName > option:selected").text()

Während unten gibt Ihnen Wert.

$("select#aioConceptName > option:selected").val()