Jak sprawdzić, czy opcja jest wybrana?

146
$('#mySelectBox option').each(function() {
    if ($(this).isChecked())
       alert('this option is selected');
     else
       alert('this is not');
});

Najwyraźniej isCheckednie działa. Więc moje pytanie brzmi: jaki jest właściwy sposób, aby to zrobić? Dzięki.

0x56794E
źródło
2
00zebra00, dziękuję za znalezienie odpowiedzi spośród wielu poniższych opcji. Pamiętaj jednak, aby zwrócić uwagę na rozmowę w komentarzach na temat „najlepszego” sposobu uzyskania dostępu do wybranej nieruchomości. Ogólnie rzecz biorąc, kiedy możesz uzyskać dostęp do elementu bezpośrednio w javascript (używając this.selected), powinieneś ominąć go za pomocą jQuery ( $(this).prop("selected")), ale oba będą działać dla Ciebie.
veeTrain
Możliwy duplikat jQuery Pobierz wybraną opcję z listy rozwijanej
Iman Kermani

Odpowiedzi:

263

AKTUALIZACJA

Bardziej bezpośrednią metodą jQuery do wybranej opcji byłaby:

var selected_option = $('#mySelectBox option:selected');

Odpowiadając na pytanie .is(':selected'), szukasz:

$('#mySelectBox option').each(function() {
    if($(this).is(':selected')) ...

Sposób inny niż jQuery (prawdopodobnie najlepsza praktyka) to:

$('#mySelectBox option').each(function() {
    if(this.selected) ...

Chociaż, jeśli szukasz tylko wybranej wartości, spróbuj:

$('#mySelectBox').val()

Jeśli szukasz tekstu wybranej wartości, wykonaj:

$('#mySelectBox option').filter(':selected').text();

Sprawdź: http://api.jquery.com/selected-selector/

Następnym razem poszukaj podwójnych pytań SO:

Pobierz aktualnie wybraną opcję lub Ustaw wybraną opcję lub Jak uzyskać $ (tę) wybraną opcję w jQuery? lub opcja [selected = true] nie działa

iambriansreed
źródło
Używa jQuery bez powodu. użyj natywnych właściwości js DOM. spójrz na to
gdoron wspiera Monikę Kwietnia
3
Wygląda na to, że nie przeczytałeś mojej odpowiedzi. this.selectedmożna użyć zamiast $(this).is(":selected"), chyba nie ma do tego potrzeby używania jsperf, prawda? Nie mam nic przeciwko używaniu jQuery !, ale używaj go wtedy, gdy tego potrzebujesz, a nie wtedy, gdy daje tylko narzut i więcej kodu.
gdoron wspiera Monikę
@gdoron this.selectedjest całkowicie poprawny, ale poprosił o właściwy sposób, aby to zrobić w jQuery.
iambriansreed
2
@gdoron Całkowicie się z tobą zgadzam. Może ci z nas, którzy wychowali się na jQuery, powinni wziąć naprawczą klasę JavaScript. :)
iambriansreed
2
@gmoron Nie, moje pytanie zostało odrzucone, a lepsze. Dobra robota detektywistyczna.
iambriansreed
26

Możesz uzyskać wybraną opcję w ten sposób:

$('#mySelectBox option:selected')...

DEMO NA ŻYWO

Ale jeśli chcesz iterować wszystkie opcje, zrób to z, this.selectedzamiast this.isCheckedktórych nie istnieje:

$('#mySelectBox option').each(function() {
    if (this.selected)
       alert('this option is selected');
     else
       alert('this is not');
});

DEMO NA ŻYWO

Aktualizacja:

Masz wiele odpowiedzi sugerujących użycie tego:

$(this).is(':selected')cóż, można to zrobić dużo szybciej i łatwiej, this.selectedwięc dlaczego miałbyś używać tego, a nie natywnej metody elementów DOM ?!

Czytaj Know Your DOM właściwości i funkcje w jQuery informacji znacznika

gdoron wspiera Monikę
źródło
1
@downvoter, chcesz skomentować? wyjdź z cienia i walcz! :)
gdoron wspiera Monikę
Może dlatego, że nie odpowiedziałeś na pytanie, ale podałeś najlepsze praktyki. ;)
iambriansreed Kwietnia
1
@iambriansreed. Ha ?! Nie odpowiedziałem na pytanie? jaka część pytania pozostała bez odpowiedzi?
gdoron wspiera Monikę
2
Ciekawe dyskusje tutaj. :) Nie jestem pewien, dlaczego wszystkie DV, ale UV dałem każdemu, kto używał this.selected. Zgadzam się z Twoimi komentarzami na temat nadużywania / nadużywania jQuery. Częścią znajomości jQuery jest wiedza, kiedy go nie używać. To powiedziawszy, pamiętaj, że ':selected'selektor jest niestandardowym selektorem Sizzle, więc użycie go wyłącza użycie querySelectorAllw obsługiwanych przeglądarkach. Z pewnością nie jest to koniec świata, ponieważ zawiera fajny, krótki kod, ale osobiście staram się unikać rzeczy tylko Sizzle.
@gdoron Gdy wskazałeś na to pytanie w Meta, zainteresowałem się. Jeśli chodzi o DV, ten węzeł może być przydatny.
VisioN,
4

Jeśli nie znasz lub nie czujesz się komfortowo is(), możesz po prostu sprawdzić wartość prop("selected").

Jak widać tutaj :

$('#mySelectBox option').each(function() {
    if ($(this).prop("selected") == true) {
       // do something
    } else {
       // do something
    }
});​

Edycja :

Jak @gdoron wskazał w komentarzach, szybszym i najbardziej odpowiednim sposobem uzyskania dostępu do wybranej właściwości opcji jest użycie selektora DOM. Oto aktualizacja skrzypiec wyświetlająca tę akcję.

if (this.selected == true) {

wydaje się działać równie dobrze! Dzięki, gdoron.

veeTrain
źródło
Czy możesz mi wyjaśnić, dlaczego powinien używać $(this).prop("selected")zamiast this.selected?! co ci to daje ??! ps Nie jestem zwolennikiem krytyki ...
gdoron wspiera Monikę
@gdoron, główną zaletą, o której myślałem, była znajomość. Nie jestem pewien, do czego isnajlepiej użyć, ale lubię uzyskiwać dostęp do moich właściwości za pomocą właściwości i atr. W większości scenariuszy może to być tylko kwestia gustu. Tak, jest ciekawa wysypka głosów przeciw!
veeTrain
2
Proponuję przeczytać część Know Your DOM Properties and Functions w jQuery informacjach o tagu . nie ma powodu, aby używać wolniejszego kodu + więcej kodu do robienia prostych rzeczy. .is()powinno być używane dla skomplikowanego selektora, takiego jak $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $ (...). is (": visiable").
gdoron wspiera Monikę
@gdoron; dziękuję bardzo za zwrócenie uwagi. Odpowiednio zaktualizowałem moją odpowiedź.
veeTrain
Nie ma problemu. Możesz głosować za moją odpowiedzią, jeśli uważasz, że jest lepsza niż inni. (Nie chcę odpowiedź ze $(this).is(':selected')zostać przyjęty Stackoverflow powinny być wykorzystywane, aby dowiedzieć się najlepsze praktyki, a nie typowych błędów ....)
gdoron wspiera Monica
3

Możesz użyć tego sposobu przez jQuery:

$(document).ready(function(){
 $('#panel_master_user_job').change(function () {
 var job =  $('#panel_master_user_job').val();
 alert(job);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job" id="panel_master_user_job" class="form-control">
                                    <option value="master">Master</option>
                                    <option value="user">User</option>
                                    <option value="admin">Admin</option>
                                    <option value="custom">Custom</option>
                                </select>

Amir
źródło
2

posługiwać się

 $("#mySelectBox option:selected");

aby sprawdzić, czy jest to szczególna opcja myoption:

 if($("#mySelectBox option:selected").text() == myoption){
          //...
 }
Mouna Cheikhna
źródło
Nie przegłosowałem Cię (są tu głosy przeciwne!), Ale co to jest myoption???
gdoron wspiera Monikę
1
tylko ciąg znaków, który ma być przykładową opcją, którą OP chce przetestować, jeśli jest zaznaczona
Mouna Cheikhna
Jeśli chodzi o głos przeciw, możesz przeczytać komentarze pod moją odpowiedzią .
gdoron wspiera Monikę
2

Potraktuj to jako swoją listę wyboru:

<select onchange="var optionVal = $(this).find(':selected').val(); doSomething(optionVal)">

                                <option value="mostSeen">Most Seen</option>
                                <option value="newst">Newest</option>
                                <option value="mostSell">Most Sell</option>
                                <option value="mostCheap">Most Cheap</option>
                                <option value="mostExpensive">Most Expensive</option>

                            </select>

następnie zaznaczasz wybraną opcję w ten sposób:

function doSomething(param) {

    if ($(param.selected)) {
        alert(param + ' is selected!');
    }

}
Masoud Darvishian
źródło
0

W moim przypadku nie wiem, dlaczego wybrane jest zawsze prawdziwe. Więc jedyny sposób, w jaki mogłem wymyślić, to:

var optionSelected = false;
$( '#select_element option' ).each( function( i, el ) {
    var optionHTMLStr = el.outerHTML;

    if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
        optionSelected = true;
        return false;
    }
});
Siergiej Oniszczenko
źródło
0

Jeśli chcesz tylko sprawdzić, czy opcja jest wybrana, nie musisz powtarzać wszystkich opcji. Po prostu zrób

if($('#mySelectBox').val()){
    // do something
} else {
    // do something else
}

Uwaga: Jeśli masz opcję o wartości = 0, którą chcesz wybrać, musisz zmienić warunek warunkowy na $('#mySelectBox').val() != null

Adam
źródło
0

Jeśli chcesz sprawdzić stan wybranej opcji dla określonej wartości :

$('#selectorId option[value=YOUR_VALUE]:selected')
dimpiax
źródło
0

Jeśli chcesz sprawdzić wybraną opcję przez javascript

Najprostszą metodą jest dodanie atrybutu onchange w tym tagu i zdefiniowanie funkcji w pliku js zobacz przykład jeśli twój plik html ma opcje takie jak ta

 <select onchange="subjects(this.value)">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
 </select>

A teraz dodaj funkcję w pliku js

function subjects(str){
    console.log(`selected option is ${str}`);
}

Jeśli chcesz sprawdzić wybraną opcję w pliku php

Po prostu podaj atrybut nazwy w swoim tagu i uzyskaj do niego dostęp do pliku php zmiennych globalnych / tablicy ($ _GET lub $ _POST) zobacz przykład, jeśli twój plik html jest podobny do tego

<form action="validation.php" method="POST">
             Subject:<br>
            <select name="subject">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
            </select><br>

         </form>

W swoim pliku validation.php php możesz uzyskać dostęp w ten sposób

$subject = $_POST['subject'];
echo "selected option is $subject";
Abhishek Pratap Singh
źródło