jQuery Get Selected Option From Dropdown

Ustaw wartości dla każdej z opcji

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

$('#aioConceptName').val() nie działa, ponieważ .val() zwraca atrybut value. Aby to działało poprawnie, atrybuty value muszą być ustawione na każdym <option>.

Teraz możesz nazywać $('#aioConceptName').val() zamiast tego wszystkiego :selected voodoo sugerowanego przez innych.

Natknąłem się na to pytanie i opracowałem bardziej zwięzłą wersję odpowiedzi Elliota BOnneville ' a:

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

Lub ogólnie:

$('#id :pseudoclass')

To oszczędza dodatkowe wywołanie jQuery, wybiera wszystko w jednym ujęciu i jest bardziej jasne (moim zdaniem).

Spróbuj tego dla wartości...

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

Lub to dla tekstu...

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

Jeśli znajdujesz się w kontekście zdarzeń, w jQuery możesz pobrać zaznaczony element opcji używając :
$(this).find('option:selected') tak:

$('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
});

Edit

Jak wspomniałem przez PossessWithin, moja odpowiedź to odpowiedź na pytanie: Jak wybrać wybraną "opcję".

Następnie, aby uzyskać wartość opcji, Użyj option.val().

Czy rozważałeś użycie zwykłego starego javascript?

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

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

Zobacz także uzyskanie opcji Tekst / wartość za pomocą JavaScript

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

Odczyt wartości (nie tekstu) select:

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

Jak wyłączyć select? w obu wariantach wartość można zmienić za pomocą:

A

Użytkownik nie może wchodzić w interakcje z rozwijanym menu. I nie wie, jakie inne opcje mogą istnieć.

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

B

Użytkownik może zobaczyć opcje w rozwijanym menu, ale wszystkie z nich są wyłączone:

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

W Tym Przypadku, $("#Status").val() będzie działać tylko dla wersji jQuery mniejsze niż 1.9.0. Wszystkie inne warianty będą działać.

Jak zaktualizować wyłączone select?

Z kodu za możesz nadal aktualizować wartość w swoim select. Jest ona wyłączona tylko dla użytkowników:

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

W niektórych przypadkach może być konieczne odpalenie zdarzeń:

$("#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>

Powinieneś użyć tej składni:

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

Więc spróbuj tego kodu:

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

Możesz przetestować w Fiddle: http://jsfiddle.net/PJT6r/9/

Zobacz o tej odpowiedzi w Ten post

Używając jQuery, po prostu dodaj Zdarzenie change i uzyskaj wybraną wartość lub tekst wewnątrz tej funkcji obsługi.

Jeśli potrzebujesz zaznaczonego tekstu, użyj tego kodu:

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

Lub jeśli potrzebujesz wybranej wartości, użyj tego kodu:

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

Użyj jQuery.val() Funkcja również dla wybranych elementów:

The .metoda val() służy przede wszystkim do uzyskiwania wartości elementów formularza takich jak input, select i textarea. W przypadku wybranych elementów, to zwraca null gdy nie jest zaznaczona żadna opcja i tablica zawierająca wartość każdej wybranej opcji, gdy jest co najmniej jedna i jest można wybrać więcej, ponieważ atrybut multiple jest obecny.

$(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>

Dla każdego, kto dowiedział się, że najlepsza odpowiedź nie działa.

Spróbuj użyć:

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

Działa u mnie w ostatnich projektach, więc warto na nie spojrzeć.

Tylko to powinno zadziałać:

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

Prosto i całkiem łatwo:

Twój dropdown

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

kod Jquery, aby uzyskać wybraną wartość

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

Dla get value of tag selected:

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

A jeśli chcesz otrzymać tekst Użyj tego kodu:

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

Na Przykład:

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

Możesz spróbować debugować to w ten sposób:

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

Mam nadzieję, że to również pomoże lepiej zrozumieć i pomoże spróbuj tego poniżej,

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

Aby uzyskać więcej szczegółów proszę http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

Dla dobrej praktyki należy użyć val(), aby uzyskać wartość wybranych opcji, a nie text().

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

Możesz użyć

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

Lub

   $("#aioConceptName :selected").val();

Jeśli chcesz pobrać atrybut 'value' zamiast węzła tekstowego, będzie to działać dla ciebie:

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

Spróbuj tego

$(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);

Wyobraź sobie DDL jako tablicę z indeksami, wybierasz jeden indeks. Wybierz ten, który chcesz ustawić za pomocą JS.

Możesz użyć $("#drpList").val();

Aby pobrać select o tej samej nazwie class=, możesz to zrobić, aby sprawdzić, czy wybrana jest opcja select.

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

Miałem ten sam problem i odkryłem, dlaczego to nie działa w mojej sprawie
Strona html została podzielona na różne fragmenty html i odkryłem, że mam inne pole wejściowe, które nosi ten sam IDENTYFIKATOR select, co spowodowało, że val() jest zawsze pusta
Mam nadzieję, że to oszczędza dzień dla każdego, kto ma podobny problem.

Oto proste rozwiązanie tego problemu.

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

Try

aioConceptName.selectedOptions[0].value

let val = aioConceptName.selectedOptions[0].value

console.log('selected value:',val);

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

Prawdopodobnie najlepszym rozwiązaniem w tego rodzaju scenariuszu jest użycie metody zmiany jQuery , aby znaleźć aktualnie wybraną wartość, jak tak:

$('#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

});

Preferuję tę metodę, ponieważ można wtedy wykonywać funkcje dla każdej wybranej opcji w danym polu select.

Zazwyczaj trzeba nie tylko uzyskać wybraną wartość, ale także uruchomić jakąś akcję. Więc dlaczego nie uniknąć całej magii jQuery i po prostu przekazać wybraną wartość jako argument do wywołania akcji?

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

Możesz wybrać używając dokładnie wybranej opcji : Poniżej podamy innerText

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

While below da ci wartość.

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