jQuery pobiera wybraną wartość opcji (nie tekst, ale atrybut „wartość”)


156

OK, mam ten kod:

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

Chciałbym poznać wartość wybranej opcji. Przykład: wybrano „Opcja 2”, a jej wartość to „2”. Wartość „2” to wartość, którą muszę uzyskać, a nie „Opcja 2”.


Demo poradnik dla Getting: freakyjolly.com/... demo poradnik dla Ustawianie freakyjolly.com/... pojedynczych i wielokrotnych Selectbox
Code Spy

Odpowiedzi:


271

04/2020: Poprawiona stara odpowiedź

Użyj : zaznaczonego selektora psuedo na wybranych opcjach, a następnie użyj funkcji .val, aby uzyskać wartość opcji.

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

Uwaga dodatkowa : użycie filtru jest lepsze niż użycie :selectedselektora bezpośrednio w pierwszym zapytaniu.

Jeśli znajdujesz się w module obsługi zmian, możesz użyć po prostu this.valuedo pobrania wybranej wartości opcji. Zobacz demo, aby uzyskać więcej opcji.

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

Stara odpowiedź:

Edycja: jak wielu wskazało, nie zwraca to wybranej wartości opcji.

~~ Użyj .val, aby uzyskać wartość wybranej opcji. Zobacz poniżej,

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

5
Zrób test:$('select[name=selector]').change(function() { alert($(this).val()); });
KingRider

4
Zwróć uwagę, że jeśli wybrana opcja nie ma valueokreślonego atrybutu, <option>label</option>zostanie zwrócona etykieta (tj. ). Może nie zawsze będzie to, czego chcesz. Oczywiście w większości aplikacji określa się wartość.
Czechnology

115

Chciałem tylko podzielić się swoim doświadczeniem

Dla mnie,

$('#selectorId').val()

zwrócony null.

Musiałem użyć

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


1
Czy był to przypadek konkretnej przeglądarki? Czy najnowsza wersja Chrome na to nie pozwalała, czy też IE tego nie obsługiwał?
Theodor Solbjørg

1
To było w najnowszej wersji Chrome. Może także w Firefoksie, ale nie jestem pewien.
David Torres

Nie wiem, dlaczego $('#selectorId option:selected').val()nie zadziałało dla mnie. Zamiast tego użyłem$('select option:selected').val()
Francisco Quintero

1
@Francisco Problem polega na tym, $('select option:selected').val()że przyjmie wartość pierwszego selektora w kodzie HTML. Podczas gdy z $('#selectorId option:selected').val()tobą możesz mieć wartość selektora, który podałeś. Dokładnie sprawdź literówki. Oto przykład, który pokazuje to, co właśnie powiedziałem: codepen.io/anon/pen/Nqgqyz
David Torres


9

Musisz dodać identyfikator do swojego wyboru. Następnie:
$('#selectorID').val()


mam dodany identyfikator, po prostu zapomniałem go dodać tutaj.
n00b

1
Z tego, co przeczytałem, najszybszą metodą jest użycie identyfikatora jako selektora.
Marcus

5

Spróbuj tego:

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

lub

var data= $('select').find('option:selected').text();

4

możesz użyć jqueryw następujący sposób

SCENARIUSZ

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

FIDDLE jest tutaj


2

Dla takiego wyboru

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

... możesz uzyskać identyfikator w ten sposób:

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

Lub możesz zamiast tego użyć wartości i uzyskać to w łatwy sposób ...

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

lubię to:

$('#list-name').val();

2

Jeden z moich opcji nie mają wartości: <option>-----</option>. Próbowałem użyć, if (!$(this).val()) { .. }ale otrzymywałem dziwne wyniki. Okazuje się, że jeśli nie masz valueatrybutu na swoim <option>elemencie, zwraca on tekst wewnątrz niego zamiast pustego ciągu. Jeśli nie chcesz val()zwracać niczego dla swojej opcji, dodaj value="".


0

Spójrz na przykład:

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

0
$('#selectorID').val();

LUB

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

LUB

$('.class_nam').val();

@FarhadBagherlo "Kontynuuj pisanie" nie jest użytecznym komentarzem do edycji! Podsumuj swoje zmiany, aby czytelnicy historii edycji zrozumieli, co zrobiłeś, bez sprawdzania każdej zmienionej postaci. Dzięki!
jpaugh

0

ten kod działa dla mnie bardzo dobrze: to zwraca wartość wybranej opcji. $ ('# select_id'). find ('opcja: wybrane'). val ();


0
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

Chociaż ten kod może rozwiązać problem, najlepiej jest dodać rozwinięcie i wyjaśnić, jak to działa dla osób, które mogą nie rozumieć tego fragmentu kodu.
referat 1111

@ paper1111 to proste funkcje. Mogę wyjaśnić, czy to jest potrzebne. $ ('select [name = tutaj jest nazwa pola wyboru]) .change () - funkcja oznacza, że ​​gdy zmienimy opcję wyboru pola, funkcja będzie działać. $ (this) .val () - zwraca wybraną wartość opcji
Turan Zamanlı

0

Link do źródła

Użyj funkcji jQuery val (), aby uzyskać wybraną wartość i text (), aby uzyskać tekst opcji.

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

Zmień wydarzenie w menu Wybierz

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

Kliknij przycisk

        $("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());
        });
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.