it-swarm.com.de

jQuery Holen Sie sich die ausgewählte Option aus dem Dropdown-Menü

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

HTML Quelltext

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

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

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

Der Grund, dass val() den Trick nicht macht, liegt darin, dass das Klicken auf eine Option den Wert der Dropdown-Liste nicht ändert - es fügt lediglich die :selected-Eigenschaft der ausgewählten Option hinzu, die ein child der Dropdown-Liste ist.

1640

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, da .val() das value-Attribut zurückgibt. Damit es richtig funktioniert, müssen die value-Attribute für jeden <option> festgelegt werden.

Jetzt können Sie $('#aioConceptName').val() aufrufen, anstatt dass all diese :selected Voodoo von anderen vorgeschlagen wird.

303
Jacob Valenta

Ich stieß auf diese Frage und entwickelte eine knappere Version der Antwort von Elliot BOnneville:

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).

149
Ed Orsi

Versuchen Sie dies für Wert ...

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

oder das für Text ...

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

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

$('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, beantworte Meine Antwort einfach auf die Frage: Wie wähle ich "Option" aus. 

Um den Optionswert zu erhalten, verwenden Sie als Nächstes option.val().

44
JoDev

Haben Sie in Betracht gezogen, einfaches Javascript zu verwenden?

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

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

Siehe auch Option Text/Wert mit JavaScript erhalten

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

Lesen des Werts (nicht des Textes) einer Auswahl:

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

Deaktivieren einer Auswahl? In beiden Varianten kann der Wert geändert werden mit: 

EIN

Benutzer können nicht mit dem Dropdown interagieren. Und er weiß nicht, welche anderen Möglichkeiten es gibt.

$('#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 funktioniert $("#Status").val()funktioniert nur für jQuery-Versionen, die kleiner als 1.9.0 sind. Alle anderen Varianten funktionieren.

So aktualisieren Sie eine deaktivierte Auswahl?

Von hinterem Code können Sie immer noch den Wert in Ihrem select 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();
11
profimedica
<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>
11
Ol Sen

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

Die .val () -Methode wird hauptsächlich verwendet, um die Werte von Formularelementen abzurufen wie Eingabe, Auswahl und Textbereich. Bei Auswahlelementen ist es gibt null zurück, wenn keine Option ausgewählt ist und ein Array, das die .__ enthält. Wert jeder ausgewählten Option, wenn mindestens eine vorhanden ist und Es ist möglich, mehr auszuwählen, da das Attribut multiple 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>

9
Salman A

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

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

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

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

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

sie sollten diese Syntax verwenden:

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

Also versuche diesen Code:

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

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

siehe diese Antwort in diesem Beitrag

8
D.L.MAN

Für alle, die die beste Antwort gefunden haben, funktionieren sie nicht.

Versuchen zu benutzen:

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

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

8
user2709153

Nur das sollte funktionieren:

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

Ich hoffe das hilft auch besser zu verstehen und hilft Probiere dies unten, __.$('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
Weitere Informationen erhalten Sie http://www.drtuts.com/get-value-multi-select-dropdown-outout-value-attribute-using-jquery/

2
Vijayaragavan

versuchen Sie 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">
2
Haris Sultan

Sie können versuchen, es auf folgende Weise zu debuggen:

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

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

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

Unkompliziert und ziemlich einfach: 

Dein Dropdown

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

Jquery-Code, um den ausgewählten Wert zu erhalten

$('#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.
});
1
Juan J

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 als Argument an den Aktionsaufruf übergeben?

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

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

0
Author PraWin

Sie können mit der genau ausgewählten Option auswählen:

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

Während unten geben Sie Wert. 

$("select#aioConceptName > option:selected").val()
0
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

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

0
Satista

Für get value des ausgewählten Tags:

 $('#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 => Ich habe diesen Tag ausgewählt:

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
0
mamal

Ich hatte das gleiche Problem und habe herausgefunden, warum es bei meinem Fall nicht funktionierte
Die HTML-Seite war in verschiedene HTML-Fragmente unterteilt, und ich fand heraus, dass ich ein anderes Eingabefeld mit der gleichen ID der Variablen select hatte, wodurch die val() immer leer war
Ich hoffe, das spart allen, die ein ähnliches Problem haben, den Tag.

0
Hasnaa Ibraheem

um ein select mit demselben class = name abzurufen, könnten Sie dies tun, um zu prüfen, ob eine select-Option ausgewählt ist.

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

um $ ("# id"). val zu verwenden, sollten Sie der 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 ..

0
Yusuf Azan