Comment vérifier si une option est sélectionnée?

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

Apparemment, isCheckedcela ne fonctionne pas. Donc ma question est quelle est la bonne façon de faire cela? Merci.

0x56794E
la source
2
00zebra00, merci d'avoir trouvé une réponse parmi les nombreuses options ci-dessous. Cependant, assurez-vous de noter la conversation dans les commentaires ci-dessous sur le `` meilleur '' moyen d'accéder à la propriété sélectionnée. L'essentiel est que lorsque vous pouvez accéder à un élément directement en javascript (en utilisant this.selected), vous devez contourner en utilisant jQuery ( $(this).prop("selected")) mais ils fonctionneront tous les deux pour vous.
veeTrain

Réponses:

263

METTRE À JOUR

Une méthode jQuery plus directe à l'option sélectionnée serait:

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

Répondre à la question .is(':selected')est ce que vous recherchez:

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

La manière non jQuery (sans doute la meilleure pratique) de le faire serait:

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

Cependant, si vous recherchez simplement la valeur sélectionnée, essayez:

$('#mySelectBox').val()

Si vous recherchez le texte de la valeur sélectionnée, procédez comme suit:

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

Consultez: http://api.jquery.com/selected-selector/

La prochaine fois, recherchez les questions SO en double:

Obtenir l'option sélectionnée actuelle ou Définir l'option sélectionnée ou Comment obtenir l'option sélectionnée $ (this) dans jQuery? ou l' option [selected = true] ne fonctionne pas

iambriansreed
la source
Il utilise jQuery sans raison valable. utilisez les propriétés DOM natives de js. jetez un oeil à ce sujet
gdoron soutient Monica
3
On dirait que vous n'avez pas lu ma réponse. this.selectedpeut être utilisé au lieu de $(this).is(":selected")je suppose qu'il n'y a pas besoin d'un jsperf pour cela, non? Je n'ai rien contre l'utilisation de jQuery !, mais utilisez-le quand vous en avez besoin, pas quand il ne donne rien d'autre que des frais généraux et plus de code.
gdoron soutient Monica le
@gdoron this.selectedest complètement valide, mais il a demandé la bonne façon de le faire avec jQuery.
iambriansreed
2
@gdoron Je suis totalement d'accord avec vous. Peut-être que ceux d'entre nous qui ont été élevés sur jQuery doivent prendre une classe JavaScript corrective. :)
iambriansreed
2
@gmoron Non, ma question a été votée à la baisse et à la hausse. Bon travail de détective cependant.
iambriansreed
26

Vous pouvez obtenir l'option sélectionnée de cette façon:

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

DÉMO EN DIRECT

Mais si vous voulez itérer toutes les options, faites-le avec this.selectedau lieu de this.isCheckedlaquelle n'existe pas:

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

DÉMO EN DIRECT

Mettre à jour:

Vous avez beaucoup de réponses vous suggérant d'utiliser ceci:

$(this).is(':selected')Eh bien, cela peut être fait beaucoup plus rapidement et plus facilement, this.selectedalors pourquoi devriez-vous l'utiliser et non la méthode native de l'élément DOM?!

Lisez Connaître vos propriétés et fonctions DOM dans les jQuery informations de balise

gdoron soutient Monica
la source
1
@downvoter, voulez-vous commenter? sortez de l'ombre et battez-vous! :)
gdoron soutient Monica
Peut-être parce que vous n'avez pas répondu à la question mais que vous avez donné les meilleures pratiques. ;)
iambriansreed
1
@iambriansreed. Ha?! Je n'ai pas répondu à la question? quelle partie de la question est restée sans réponse?
gdoron soutient Monica le
2
Des discussions intéressantes ici. :) Je ne sais pas pourquoi tous les DV, mais j'ai UV'd tous ceux qui ont utilisé this.selected. Je suis d'accord avec vos commentaires sur la surutilisation / abus de jQuery. Une partie de la connaissance de jQuery, c'est de savoir quand ne pas l' utiliser. Cela dit, gardez à l'esprit que le ':selected'sélecteur est un sélecteur Sizzle personnalisé, donc son utilisation désactive l'utilisation de querySelectorAlldans les navigateurs pris en charge. Ce n'est certainement pas la fin du monde, car il fournit un joli code court, mais j'ai personnellement tendance à éviter les trucs Sizzle uniquement.
@gdoron En pointant cette question dans Meta, je me suis intéressé. Concernant DV, ce nœud peut vous être utile.
VisioN
4

Si vous n'êtes pas familier ou à l'aise avec is(), vous pouvez simplement vérifier la valeur de prop("selected").

Comme vu ici :

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

Modifier :

Comme @gdoron l'a souligné dans les commentaires, le moyen le plus rapide et le plus approprié d'accéder à la propriété sélectionnée d'une option est via le sélecteur DOM. Voici la mise à jour du violon affichant cette action.

if (this.selected == true) {

semble fonctionner aussi bien! Merci gdoron.

veeTrain
la source
Pouvez-vous s'il vous plaît m'expliquer pourquoi devrait-il utiliser à la $(this).prop("selected")place de this.selected?! qu'est-ce que ça te donne ??! ps I'm not the downvoter ...
gdoron soutient Monica
@gdoron, le principal avantage auquel j'ai pensé était la familiarité. Je ne suis pas sûr de ce qui isest le mieux utilisé mais j'aime accéder à mes propriétés par prop et attr. Dans la plupart des scénarios, ce n'est qu'une question de goût. Oui, il y a une curieuse éruption de vote à la baisse!
veeTrain
2
Je suggère de lire la partie Know Your DOM Properties and Functions des jQuery informations de balise . il n'y a aucune raison d'utiliser du code plus lent + plus de code pour faire des choses simples. .is()devrait être utilisé pour un sélecteur compliqué comme $(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like $ (...). is (": visiable").
gdoron soutient Monica le
@gdoron; merci beaucoup de l'avoir signalé. J'ai mis à jour ma réponse en conséquence.
veeTrain
Pas de problème. Vous pouvez voter pour ma réponse si vous pensez que c'est mieux que les autres. (Je ne veux pas que la réponse $(this).is(':selected')soit acceptée. Stackoverflow devrait être utilisé pour apprendre les meilleures pratiques, pas les erreurs courantes ...)
gdoron soutient Monica
3

Vous pouvez utiliser cette méthode par 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
la source
2

utilisation

 $("#mySelectBox option:selected");

pour tester si c'est une option particulière myoption:

 if($("#mySelectBox option:selected").text() == myoption){
          //...
 }
Mouna Cheikhna
la source
Vous n'avez pas voté contre (il y a une série de votes négatifs ici!) Mais qu'est-ce que myoption???
gdoron soutient Monica le
1
juste une chaîne qui est censée être un exemple d'option que l'OP veut tester si elle est sélectionnée
Mouna Cheikhna
En ce qui concerne le vote défavorable, vous voudrez peut-être lire les commentaires sous ma réponse .
gdoron soutient Monica le
2

Considérez ceci comme votre liste de sélection:

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

puis vous cochez l'option sélectionnée comme ceci:

function doSomething(param) {

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

}
Masoud Darvishian
la source
0

Dans mon cas, je ne sais pas pourquoi sélectionné est toujours vrai. Donc, la seule façon que j'ai pu imaginer est:

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
la source
0

Si vous souhaitez uniquement vérifier si une option est sélectionnée, vous n'avez pas besoin de parcourir toutes les options. Fais juste

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

Remarque: Si vous avez une option avec valeur = 0 que vous souhaitez sélectionner, vous devez modifier la condition if en $('#mySelectBox').val() != null

Adam
la source
0

Si vous devez vérifier l'état de l'option sélectionnée pour une valeur spécifique :

$('#selectorId option[value=YOUR_VALUE]:selected')
dimpiax
la source
0

Si vous souhaitez vérifier l'option sélectionnée via javascript

La méthode la plus simple consiste à ajouter un attribut onchange dans cette balise et à définir une fonction dans le fichier js voir un exemple si votre fichier html a des options comme celle-ci

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

Et maintenant, ajoutez une fonction dans le fichier js

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

Si vous souhaitez vérifier l'option sélectionnée dans le fichier php

Donnez simplement l'attribut name dans votre balise et accédez-y au fichier php global variables / array ($ _GET ou $ _POST) voir un exemple si votre fichier html est quelque chose comme ça

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

Et dans votre fichier php validation.php vous pouvez accéder comme ceci

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