jQuery Uzyskaj wybraną opcję z menu rozwijanego

Zwykle zwracam $("#id").val()wartość wybranej opcji, ale tym razem nie działa. Wybrany tag ma identyfikatoraioConceptName

Kod HTML

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

W przypadku opcji rozwijanych prawdopodobnie potrzebujesz czegoś takiego:

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

Powodem val()tego nie jest to, że kliknięcie opcji nie zmienia wartości menu rozwijanego - po prostu dodaje :selectedwłaściwość do wybranej opcji, która jest potomkiem menu rozwijanego.

Ustaw wartości dla każdej 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 valueatrybut. Aby działało poprawnie, valueatrybuty muszą być ustawione na każdym z nich <option>.

Teraz możesz zadzwonić $('#aioConceptName').val()zamiast :selectedsugerować inne voodoo.

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

Oszczędza to dodatkowego połączenia jQuery, zaznacza wszystko w jednym ujęciu i jest bardziej przejrzyste (moja opinia).

Wypróbuj to za wartość ...

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

lub to dla tekstu ...

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

Jeśli jesteś w kontekście zdarzenia, w jQuery możesz pobrać wybrany element opcji za pomocą: w
$(this).find('option:selected')ten sposób:

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

Edytować

Jak wspomniano przez PossessWithin , moja odpowiedź wystarczy odpowiedzieć 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 Uzyskiwanie opcji tekst / wartość za pomocą JavaScript

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

Odczytywanie wartości (nie tekstu) zaznaczenia:

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

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

ZA

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

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

b

Użytkownik widzi opcje w menu, ale wszystkie są wyłączone:

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

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

Jak zaktualizować wyłączony wybór?

Z kodu z tyłu możesz nadal aktualizować wartość w swoim wyborze. Jest wyłączony tylko dla użytkowników:

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

W niektórych przypadkach może być konieczne uruchomienie 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 wypróbuj ten kod:

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

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

zobacz o tej odpowiedzi w tym poście

Korzystając z jQuery, wystarczy dodać changezdarzenie i uzyskać wybraną wartość lub tekst w tym module 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 również jQuery.val()funkcji dla wybranych elementów:

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 zwraca, nullgdy żadna opcja nie jest zaznaczona, a tablica zawierająca wartość każdej wybranej opcji, gdy jest co najmniej jedna i można wybrać więcej, ponieważ multipleatrybut 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 odkrył, że najlepsza odpowiedź nie działa.

Spróbuj użyć:

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

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

To powinno działać:

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

Prosto i całkiem łatwo:

Twoja lista rozwijana

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

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

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

Aby uzyskać wartość wybranego tagu:

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

Jeśli chcesz chwycić atrybut „wartość” zamiast węzła tekstowego, zadziała to:

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.

Mam nadzieję, że to również pomaga lepiej zrozumieć i pomaga wypróbować to 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 informacji, prosimy http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

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

aby pobrać zaznaczenie o tej samej klasie = nazwa, możesz to zrobić, aby sprawdzić, czy wybrano opcję wyboru.

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

Miałem ten sam problem i zorientowałem się, dlaczego nie działa w mojej sprawie
. Strona HTML została podzielona na różne fragmenty HTML i stwierdziłem, że mam inne pole wejściowe o tym samym identyfikatorze select, co powoduje, że val()zawsze jest pusta
Mam nadzieję, że pozwoli to zaoszczędzić dzień każdemu, kto ma podobny problem.

aby użyć $ („# id”). val, powinieneś dodać wartość do opcji takiej jak ta:

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

w przeciwnym razie możesz użyć

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

Chciałbym, żeby to pomogło ...

Oto proste rozwiązanie tego problemu.

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

Prawdopodobnie najlepszym rozwiązaniem dla tego rodzaju scenariusza jest użycie metody zmiany jQuery w celu znalezienia aktualnie wybranej wartości, na przykład:

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

});

Wolę tę metodę, ponieważ możesz następnie wykonywać funkcje dla każdej wybranej opcji w danym polu wyboru.

Mam nadzieję, że to pomaga!

Zwykle trzeba nie tylko uzyskać wybraną wartość, ale także wykonać akcję. Dlaczego więc nie uniknąć całej magii jQuery i po prostu przekazać wybraną wartość jako argument do wezwania do działania?

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

Możesz wybrać za pomocą dokładnie wybranej opcji: Poniżej podany zostanie tekst wewnętrzny

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

Podczas gdy poniżej da ci wartość.

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