Sélection de jquery sur une liste de sélection

Question

J'ai une question sur la sélection de jquery. Je veux cibler une liste de sélection, quand vous sélectionnez "Dr" dans la liste de sélection, alors un div ci-dessous devrait être caché.

codepen example

$(document).ready(function(){ 
var num = Dr; 
$("div#myselect select.select option").each(function(){ 
    if($(this).selected()==num){ 
     $(".test1").hide(); 
    } 
    }); 
}); 

Answer 1

Il y a beaucoup mal ici. En un coup d'œil:

1. Dr est une erreur de syntaxe. Les chaînes doivent être entourées de guillemets.
2. Vous vérifiez la valeur sélectionnée une fois lors du chargement de la page, sans que l'utilisateur n'ait la possibilité de sélectionner quoi que ce soit. Vous recherchez un select avec class="select" qui n'existe pas dans votre HTML. Vous recherchez également un div avec id="myselect" qui n'existe pas dans votre HTML.
3. Il n'y a pas de fonction .selected().

Je suspect que vous vouliez dire quelque chose comme ce qui suit:

$(document).ready(function(){ 
    var num = 'Dr'; 
    $("select").change(function(){ 
     if($(this).find('option:selected').text()==num){ 
      $(".test1").hide(); 
     } 
    }); 
}); 

Notez les modifications:

1. Wrapped Dr entre guillemets parce que c'est une chaîne.
2. Créez un gestionnaire d'événements change au lieu de simplement vérifier directement l'état actuel du code HTML. Ce gestionnaire d'événements sera appelé chaque fois que l'élément cible "change". (A sa valeur modifiée par l'utilisateur.)
3. Remplacé le sélecteur avec juste select pour cibler l'élément de formulaire <select> sur la page. S'il y a plus de <select> éléments dans votre code cible, vous pouvez également utiliser cette id ou identifier vos cibles <select> de différentes manières.
4. Lors de l'appel de l'événement change, le code recherche l'option sélectionnée dans le <select> et vérifie le texte de cette option. (Étant donné que le value est un nombre et non la chaîne 'Dr'.)

J'ai bifurqué votre CodePen ici pour démontrer.

De plus, si vous voulez re-show l'élément quand une autre option est sélectionnée, vous ajouteriez un else bloc:

if($(this).find('option:selected').text()==num){ 
    $(".test1").hide(); 
} else { 
    $(".test1").show(); 
} 

Answer 2

Quelques erreurs. Vous devez d'abord inclure des chaînes entre guillemets. Ensuite, vous voulez vérifier la liste de sélection quand quelqu'un apporte une modification, donc vous ne voulez pas utiliser .each() mais plutôt l'événement .change(). Ensuite, vous ne voulez pas vérifier la valeur puisque c'est numérique, alors utilisez .text() ou .html() pour obtenir le contenu de l'option sélectionnée au lieu de .val().

Exemple:

$(document).ready(function() { 
 
    var num = 'Dr'; 
 
    $("#myselect").change(function() { 
 
    if ($(this).find('option:selected').text() == num) { 
 
     $(".test1").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="1">Mr</option> 
 
    <option value="2">Mrs</option> 
 
    <option value="3">Ms</option> 
 
    <option value="4">Dr</option> 
 
    <option value="5">Prof</option> 
 
</select> 
 

 
<div class="test1">test1</div>