Test sur champs dans formulaire

fabrice88
Javascript

Bonjour,
J'ai un petit soucis avec un petit script que je veux utiliser dans un formulaire.
Le but est le suivant :
Si "nbrcouleurs" != de 0 alors je veux afficher rouge et bleue ma liste déroulante.
Si "nbrcouleurs" = 0 alors je n'affiche que bleue.

Dans mon header j'ai le chargement de jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

et mon script 

<script type="text/javascript">
$(document).ready(function(){
    // Rend invisible tous les éléments qui on la classe cacher
        $(".cacher").hide();
    //lors du changement de selection de la liste portant l'id nbrcouleurs
        $("#nbrcouleurs").change(function(){
            // si la liste qui porte l'id nbrcouleurs a une option choisie donc différente de zéro alors
            if($("#nbrcouleurs").val != "0"){
                // on affiche les éléments qui on la classe cacher
                $(".cacher").show();
            }
            else{
                //sinon on les caches de nouveaux
                $(".cacher").hide();
            }
        })
    });
</script>

puis mon mini formulaire 

<form>
<select id="nbrcouleurs">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select name="couleurdefini" id="couleurdefini">
    <option value="rouge" class="cacher">rouge</option>
    <option value="bleu" selected="selected">bleu</option>
</select>
</form>

Au lancement de la page par défaut on a bien 0 et donc que bleu dans la liste déroulante (c'est bon).
Par contre si je met un chiffre (1 ou 2...) j'ai bien les 2 choix dans ma liste déroulante (toujours bon) mais si je remet 0 alors au lieu de n'avoir que le bleue j'ai toujours les 2 choix.

Auriez vous une idée du pourquoi lorsque je remet sur 0 sa ne masque plus le "rouge" dans ma liste ?

7 réponses

Vallyan
Réponse acceptée

Bon, apparemment tu peux pas jouer avec les show() / hide() sur des options avec ces deux la.
c'est un peu moins élégant mais ceci devrait fonctionner:

$(document).ready(function(){
  $("#nbrcouleurs").change(function(){
    if( $("#nbrcouleurs").val() != "0" ) {
      if( $(".cacher").length < 1 )
        $("#couleurdefini").append('<option value="rouge" class="cacher">rouge</option>');
    } else
      $(".cacher").remove();
  })
});

Regarde ici pour un exemple http://codepen.io/anon/pen/KysHf

Attention tu noteras que dans ton HTML, par défaut tu ne dois pas mettre l'option rouge, du coup.

Vallyan

Ajoute une parenthèse dans ton js, ligne 8

if($("#nbrcouleurs").val() != "0"){
------------------------^^

http://codepen.io/anon/pen/FBwkx

fabrice88
Auteur

Super Merci c'est bien ça sa fonctionne (enfin presque)
si par exemple je met le chiffre 2 j'ai donc le choix de rouge ou bleue.
si je sélectionne rouge et que ensuite je remet le chiffre 0 alors dans mon select au lieu de n'avoir que bleu j'ai toujours le rouge qui est resté par défaut. Est-il possible de dès l'instant que je met 0 on réinitialise en quelques sorte le select pour qu'il ne reste que bleue ?

Vallyan

Ajoute

$("#couleurdefini").val("bleu");

juste avant la ligne 

$(".cacher").hide();

J'ai updaté le lien http://codepen.io/anon/pen/FBwkx si tu veux regarder

fabrice88
Auteur

Merci Vallyan. je viens de testé sr Firefox sa fonctionne très bien, sous Chrome sa fonctionne également très bien par contre sous IE et Safarie peut importe la valeur j'ai toujours les 2 choix de couleurs.

fabrice88
Auteur

Un grand merci ! vous m'avez appris énormément avec ce petit code. J'ai testé sous 4 navigateur et tout est bon.

Vallyan

Bonne continuation pour la suite !