11540 sujets

JavaScript, DOM et API Web HTML5

Liste déroulante : 2 Problèmes

Bonjour,

J'ai deux problème sur une liste déroulante basique.

1) Quand l'internaute clic sur les tirets (---) je souhaite que mes div (toutes les DIV de la liste, réapparaissent.)
2) Quand un internaute clic par exemple sur "Choix 1" les div avec l'ID "alimentation" sont censé s'affiché. Hors là, dés qu'il y une deuxième div ID avec le même id (alimentation) il y a problème. La 2eme div reste toujours affiché dans n'importe quel circonstance. Je sais qu'il faut mettre des div class, mais je n'y arrive pas (avec le javascript je pense) ...

Voici mon code :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Ceci est le titre de la page</title>
    <script type="text/javascript">
      function catsel(sel) {
        if (sel.value=="-1" ) return;
        var opt=sel.getElementsByTagName("option");
        for (var i=0; i<opt.length; i++) {
          var x=document.getElementById(opt[i].value);
          if (x) x.style.display="none";
        }
        var cat = document.getElementById(sel.value);
        if (cat) cat.style.display="block";
      }
    </script>
	
  </head> 
  <body>
    <table>
      <tr>
        <td>
          <select onchange="catsel(this)">
            <option value="-1">---</option>
            <option value="alimentation">Choix 1</option>
            <option value="2">Choix 2</option>
            <option value="3">Choix 3</option>
            <option value="4">Choix 4</option>
            <option value="5">Choix 5</option>
            <option value="6">Choix 6</option>
            <option value="7">Choix 7</option>
            <option value="8">Choix 8</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div id="alimentation" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 1</td></tr></table>
          </div>
		       <div id="alimentation" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 1bis</td></tr></table>
          </div>
          <div id="2" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 2</td></tr></table>
          </div>
          <div id="3" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 3</td></tr></table>
          </div>
          <div id="4" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 4</td></tr></table>
          </div>
          <div id="5" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 5</td></tr></table>
          </div>
          <div id="6" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 6</td></tr></table>
          </div>
          <div id="7" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 7</td></tr></table>
          </div>
          <div id="8" style="display:block">
            <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 8</td></tr></table>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>


Merci d'avance !![/i]
salut,

1) Normal qu'il ne se passe rien vu que tu ne fais rien. Si tu mets un "return" pour la valeur "-1", on sort immédiatement de la fonction sensée gérer les choix via le <select>. Il faut imaginer une astuce qui permettrait d'utiliser la bouclé déjà créer pour parcourir l'ensemble des options. On pourrait faire une simple vérification en début de fonction pour voir si la valeur du <select> est "-1" et affecter une variable de type booléen pour afficher ou masquer l'ensemble des <div>.

2) C'est peut être parce qu'un ID doit être unique ? Tu ne peux pas utiliser un ID deux fois, il faut changer ta conception.

Voici un exemple complet qui pourrait t'inspirer.
Bonsoir,

Merci pour ta réponse.

Donc 1) résolu, je te remercie !

2) Oui je sais, j'essaye de mettre : getElementsByClassName, mais je n'y arrive pas. Ma connaissance est très limité en javascript.

Voici le rendu :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Ceci est le titre de la page</title>
    <script type="text/javascript">
window.onload=function(){
function selectionDone(e) {

    var showAll = (e.target.value == "-1") ? 1 : 0,
        i = 1,
        l = select.children.length;

    for (; i < l; i++) {

        document.getElementById(select.children[i].value).style.display = (showAll) ? "block" : "none";

    }

    !showAll && (document.getElementsByClassName(e.target.value).style.display = "block");

}

var select = document.querySelector("select");

select.children[0].setAttribute("selected", "");

select.addEventListener("change", selectionDone, false);
}
</script>
</head> 
  <body>
    <table>
      <tr>
        <td>
          <select>
            <option value="-1">---</option>
            <option value="alimentation">Choix 1</option>
            <option value="2">Choix 2</option>
            <option value="3">Choix 3</option>
            <option value="4">Choix 4</option>
            <option value="5">Choix 5</option>
            <option value="6">Choix 6</option>
            <option value="7">Choix 7</option>
            <option value="8">Choix 8</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="2">
<div class="alimentation">Alimentation</div>
<div class="alimentation">Alimentation bis</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>
<div class="6">6</div>
<div class="7">7</div>
<div class="8">8</div>
        </td>
      </tr>
    </table>
  </body>
</html>
[/i]
C'est parce que getElementsByClassName renvoi un tableau que tu ne peux pas exploiter sans préciser l'index que tu cibles. Si par exemple tu cherches à récupérer la classe "alimentation", le tableau renvoyé contiendra donc deux éléments. Pour que ça marche, il faut donc écrire de la sorte :

document.getElementsByClassName("alimentation")[0].style.display = "block";
document.getElementsByClassName("alimentation")[1].style.display = "block";

Comme on imagine que le nombre d'éléments n'est pas connu d'avance, il faudra alors ajouter une nouvelle boucle pour parcourir ce qui a été renvoyé par getElementsByClassName.
Tu peux voir l'exemple précédent adapté à cette contrainte.

Cela dit ça reste un peu lourd à mes yeux. On pourrait imaginer d'autres façons de faire, si par exemple tu changeais ta structure HTML, tu pourrais ne plus te soucier de la première étape. En regroupant tes <div> à afficher dans une <div> spécifique, on pourrait avoir quelque chose comme ça.

À toi d'imaginer une autre approche qui pourrait simplifier au mieux ton JS tout en gardant à l'esprit que le mieux est l'ennemi du bien Smiley jap
Bonsoir,

Infiniment merci pour le second code, c'est exactement ce que je cherche, puis une fois le boulot fait, je comprends mieux la façon de prendre une div, avec tout le reste dedans.

Une question complètement hors contexte, sur JSFiddle, onLoad, signifie onLoad dans <body
ou bien onLoad dans le code JS en lui même ? Car moi je met ce petit morceau :

window.onload=function(){
function selectionDone(e) {





(Au passage, j'admire ta façon d'écrire Smiley biggrin )
Sujet clos
Aller à