Wie überprüfe ich, ob eine Option ausgewählt ist?

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

Anscheinend isCheckedfunktioniert das nicht. Meine Frage ist also, wie man das richtig macht. Vielen Dank.

0x56794E
quelle
2
00zebra00, danke, dass Sie unter den vielen unten aufgeführten Optionen eine Antwort gefunden haben. Bitte beachten Sie jedoch die Konversation in den Kommentaren unten über die beste Art des Zugriffs auf die ausgewählte Immobilie. Der allgemeine Wesentliche ist , dass , wenn Sie ein Element direkt in Javascript zugreifen können (mit this.selected) , dass Sie sollten Bypass jQuery ( $(this).prop("selected")) , aber sie werden für Sie beide arbeiten.
VeeTrain
Mögliches Duplikat von jQuery Get Selected Option aus Dropdown
Iman Kermani

Antworten:

263

AKTUALISIEREN

Eine direktere jQuery-Methode für die ausgewählte Option wäre:

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

Die Beantwortung der Frage .is(':selected')ist das, wonach Sie suchen:

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

Die Nicht-jQuery-Methode (wohl Best Practice) wäre:

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

Wenn Sie nur nach dem ausgewählten Wert suchen, versuchen Sie Folgendes:

$('#mySelectBox').val()

Wenn Sie nach dem Text des ausgewählten Werts suchen, gehen Sie wie folgt vor:

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

Überprüfen Sie heraus: http://api.jquery.com/selected-selector/

Suchen Sie beim nächsten Mal nach doppelten SO-Fragen:

Aktuelle ausgewählte Option abrufen oder Option auswählen oder Wie wird $ (diese) ausgewählte Option in jQuery abgerufen? oder Option [ausgewählt = wahr] funktioniert nicht

iambriansreed
quelle
Es verwendet jQuery ohne guten Grund. Verwenden Sie die nativen js DOM-Eigenschaften. werfen Sie einen Blick auf diese
gdoron unterstützt Monica
3
Es sieht so aus, als hättest du meine Antwort nicht gelesen. this.selectedkann verwendet werden, anstatt dass $(this).is(":selected")ich denke, dass dafür kein jsperf benötigt wird, oder? Ich habe nichts gegen die Verwendung von jQuery!, Aber benutze es, wenn du es brauchst, nicht wenn es nichts als Overhead und mehr Code gibt.
Gdoron unterstützt Monica
@gdoron this.selectedist vollständig gültig, aber er hat nach der richtigen jQuery-Methode gefragt.
Iambriansreed
2
@gdoron Ich stimme dir vollkommen zu. Vielleicht müssen diejenigen von uns, die mit jQuery aufgewachsen sind, eine JavaScript-Korrekturklasse belegen. :)
iambriansreed
2
@gmoron Nein, meine Frage wurde abgelehnt und abgelehnt. Gute Detektivarbeit.
Iambriansreed
26

Sie können die ausgewählte Option folgendermaßen erhalten:

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

LIVE DEMO

Wenn Sie jedoch alle Optionen iterieren möchten, tun Sie dies mit, this.selectedanstatt this.isCheckedwelche nicht vorhanden sind:

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

LIVE DEMO

Aktualisieren:

Sie haben viele Antworten erhalten, die Ihnen empfehlen, dies zu verwenden:

$(this).is(':selected')Nun, es kann viel schneller und einfacher gemacht this.selectedwerden. Warum sollten Sie es verwenden und nicht die native DOM-Elementmethode?!

Lesen Sie Kennen Sie Ihre DOM-Eigenschaften und -Funktionen in den jQuery Tag-Informationen

Gdoron unterstützt Monica
quelle
1
@downvoter, möchtest du einen Kommentar abgeben? Raus aus den Schatten und kämpfe! :)
Gdoron unterstützt Monica
Vielleicht, weil Sie die Frage nicht beantwortet, sondern Best Practice angegeben haben. ;)
iambriansreed
1
@iambriansreed. Ha?! Ich habe die Frage nicht beantwortet? Welcher Teil der Frage blieb unbeantwortet?
Gdoron unterstützt Monica
2
Interessante Diskussionen hier. :) Ich bin mir nicht sicher, warum all die DVs, aber ich habe alle, die sie verwendet haben, UV-Licht gemacht this.selected. Ich stimme Ihren Kommentaren zu jQuery-Überbeanspruchung / Missbrauch zu. Ein Teil des Wissens über jQuery besteht darin, zu wissen, wann es nicht verwendet werden soll. Beachten Sie jedoch, dass der ':selected'Selektor ein benutzerdefinierter Sizzle-Selektor ist. Wenn Sie ihn verwenden, wird die Verwendung querySelectorAllin unterstützten Browsern deaktiviert . Es ist sicherlich nicht das Ende der Welt, da es einen netten, kurzen Code enthält, aber ich persönlich neige dazu, das Nur-Sizzle-Zeug zu meiden.
@gdoron Als du diese Frage in Meta gestellt hast, wurde ich interessiert. In Bezug auf DV kann dieser Knoten für Sie nützlich sein.
VisioN
4

Wenn Sie nicht vertraut oder vertraut sind is(), können Sie einfach den Wert von überprüfen prop("selected").

Wie hier zu sehen :

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

Bearbeiten :

Wie @gdoron in den Kommentaren hervorhob, ist der schnellere und am besten geeignete Weg, auf die ausgewählte Eigenschaft einer Option zuzugreifen, der DOM-Selektor. Hier ist das Geigen- Update , das diese Aktion anzeigt.

if (this.selected == true) {

scheint genauso gut zu funktionieren! Danke gdoron.

veeTrain
quelle
Kannst du mir bitte erklären, warum er $(this).prop("selected")statt verwenden sollte this.selected?! was gibt es dir ??! ps Ich bin nicht der Downvoter ...
Gdoron unterstützt Monica
@gdoron, der Hauptvorteil, an den ich dachte, war Vertrautheit. Ich bin mir nicht sicher, wofür ich am isbesten verwendet werde, aber ich greife gerne über prop und attr auf meine Immobilien zu. In den meisten Szenarien kann es nur eine Frage des Geschmacks sein. Ja, es gibt einen merkwürdigen Ausschlag von Abstimmungen!
VeeTrain
2
Ich empfehle, den Teil Eigenschaften und Funktionen Ihres DOM in den jQuery Tag-Informationen zu lesen . Es gibt keinen Grund, langsameren Code + mehr Code zu verwenden, um einfache Dinge zu tun. .is()sollte für komplizierte Selektoren wie $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $ (...) verwendet werden. is (": visiable").
Gdoron unterstützt Monica
@gdoron; Vielen Dank für den Hinweis. Ich habe meine Antwort entsprechend aktualisiert.
VeeTrain
Kein Problem. Sie können meine Antwort positiv bewerten, wenn Sie der Meinung sind, dass sie besser ist als die anderen. (Ich möchte nicht, dass die Antwort mit $(this).is(':selected')akzeptiert wird. Stackoverflow sollte verwendet werden, um Best Practices zu lernen, keine häufigen Fehler ...)
Gdoron unterstützt Monica am
3

Sie können diesen Weg durch jquery verwenden:

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

verwenden

 $("#mySelectBox option:selected");

um zu testen, ob es sich um eine bestimmte Option handelt myoption:

 if($("#mySelectBox option:selected").text() == myoption){
          //...
 }
Mouna Cheikhna
quelle
Habe dich nicht herabgestimmt (es gibt hier eine serielle Abwertung!), Aber was ist myoption???
Gdoron unterstützt Monica
1
Nur eine Zeichenfolge, die eine Beispieloption sein soll, die das OP testen möchte, wenn sie ausgewählt ist
Mouna Cheikhna,
In Bezug auf die Ablehnung möchten Sie vielleicht die Kommentare unter meiner Antwort lesen .
Gdoron unterstützt Monica
2

Betrachten Sie dies als Ihre Auswahlliste:

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

Dann überprüfen Sie die ausgewählte Option wie folgt:

function doSomething(param) {

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

}
Masoud Darvishian
quelle
0

In meinem Fall weiß ich nicht, warum ausgewählt immer wahr ist. Der einzige Weg, den ich mir ausdenken konnte, ist:

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

    if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
        optionSelected = true;
        return false;
    }
});
Sergey Onishchenko
quelle
0

Wenn Sie nur überprüfen möchten, ob eine Option ausgewählt ist, müssen Sie nicht alle Optionen durchlaufen. Mach einfach

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

Hinweis: Wenn Sie eine Option mit dem Wert = 0 haben, die ausgewählt werden soll, müssen Sie die if-Bedingung in ändern $('#mySelectBox').val() != null

Adam
quelle
0

Wenn Sie den ausgewählten Status der Option auf einen bestimmten Wert überprüfen müssen :

$('#selectorId option[value=YOUR_VALUE]:selected')
Dimpiax
quelle
0

Wenn Sie die ausgewählte Option über Javascript überprüfen möchten

Die einfachste Methode ist das Hinzufügen eines onchange-Attributs in diesem Tag und das Definieren einer Funktion in der js-Datei. Siehe Beispiel, wenn Ihre HTML-Datei Optionen wie diese enthält

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

Und jetzt Funktion in js-Datei hinzufügen

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

Wenn Sie die ausgewählte Option in der PHP-Datei aktivieren möchten

Geben Sie einfach das Namensattribut in Ihr Tag ein und greifen Sie auf die globalen Variablen / das Array der PHP-Datei ($ _GET oder $ _POST) zu. Sehen Sie sich das Beispiel an, wenn Ihre HTML-Datei so ähnlich ist

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

Und in Ihrer PHP-Datei validation.php können Sie so zugreifen

$subject = $_POST['subject'];
echo "selected option is $subject";
Abhishek Pratap Singh
quelle