Afficher div selon option select [Résolu/Fermé]

Signaler
Messages postés
1003
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
3 juin 2021
-
Messages postés
1003
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
3 juin 2021
-
Bonjour à tous !

J'espère que les fêtes se préparent bien :)

J'aimerais pouvoir afficher ma div selon l'Id de mon second select en fait et je rencontre un soucis de faisabilité.
Pouvez-vous m'aider svp ?

<select name="Fr_Menu" size="7" onChange="updateFr_Sub_menu(this.selectedIndex)">
<option disabled >-- Menu --</option>
<option value="Hommes">Hommes</option>
<option value="Femmes">Femmes</option>
<option value="Enfants">Enfants</option>
<option value="Bébés">Bébés</option>
</select>

<select name="Fr_Sub_menu" size="7"></select>

<div id="ma_div_01" class="mes_divs" style="display:none">blabla 01</div>
<div id="ma_div_02" class="mes_divs" style="display:none">blabla 02</div>
<div id="ma_div_03" class="mes_divs" style="display:none">blabla 03</div>
<div id="ma_div_04" class="mes_divs" style="display:none">blabla 04</div>
<div id="ma_div_05" class="mes_divs" style="display:none">blabla 05</div>
<div id="ma_div_06" class="mes_divs" style="display:none">blabla 06</div>
<div id="ma_div_07" class="mes_divs" style="display:none">blabla 07</div>
<div id="ma_div_08" class="mes_divs" style="display:none">blabla 08</div>
<div id="ma_div_09" class="mes_divs" style="display:none">blabla 09</div>
<div id="ma_div_10" class="mes_divs" style="display:none">blabla 10</div>
<div id="ma_div_11" class="mes_divs" style="display:none">blabla 11</div>
<div id="ma_div_12" class="mes_divs" style="display:none">blabla 12</div>
</form>

<script type="text/javascript">
var Fr_Menu_list=document.Form.Fr_Menu
var Fr_Sub_menu_list=document.Form.Fr_Sub_menu

var Fr_Sub_menu=new Array()
Fr_Sub_menu[0]=""
Fr_Sub_menu[1]=["Valeur A1", "Valeur A2", "Valeur A3"]
Fr_Sub_menu[2]=["Valeur B1", "Valeur B2", "Valeur B3"]
Fr_Sub_menu[3]=["Valeur C1", "Valeur C2", "Valeur C3"]
Fr_Sub_menu[4]=["Valeur D1", "Valeur D2", "Valeur D3"]
    
function updateFr_Sub_menu(selectedcitygroup){
Fr_Sub_menu_list.options.length=0
if (selectedcitygroup>0){
for (i=0; i<Fr_Sub_menu[selectedcitygroup].length; i++)
Fr_Sub_menu_list.options[Fr_Sub_menu_list.options.length] = new Option(Fr_Sub_menu[selectedcitygroup][i].split("|")[0], Fr_Sub_menu[selectedcitygroup][i].split("|")[1])
}
}
</script>


Merci de votre aide,

Cordialement

2 réponses

Salut,
houla vous ne vous y prenez pas par le chemin le plus simple.

En effet pour afficher quelque chose en fonction d'ACTION(s) de l'utilisateur c'est bien JavaScript.

Seulement je vous conseille de partir des bases(si ce n'est de la programmation - en tout cas celle qui se nomme autrement que procédurale).
L'informatique est avant tout (et la programmation surtout) un moyen de se simplifier la vie. C'est pour cela que l'on évite (IMPORTANT) de répéter plusieurs fois la même chose et là où le mot informatique devient magique c'est qu'il implique des DONNÉES et l’Automatisation DE TRAITEMENTS.

L'automatisation c'est la réutilisation d'un programme ou bout d'un programme(ex: une fonction) pour plusieurs cas possible. C'est aussi les boucles logiques et/ou conditionnelles.
Particulièrement dans le cas de JavaScript et des langages (dits) web qui est un langage fonctionnant sur l'ordinateur client(sauf exceptions) on parle de programmation événementielle. C'est simplement axé une partie de sa conception( ex: l'algorithme) sur les événements, autrement dits les actions(surtout celles de l'utilisateur : par exemple lorsqu'il clique sur un bouton, qu'il appuie sur une touche, qu'il change de page, etc...).

Reprenons votre programme:
(l'ordre ne correspond pas vraiment à l'ordre de réalisation ou logique réel)
Messages postés
33128
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juillet 2021
3 635
Bonjour,

Déjà...aujourd'hui on travaille avec les ID et non les FORM.....
Ensuite, voici à quoi pourrait ressembler ton code

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>TEST</title>
</head>
<body>
	<h1>TEST</h1>
	<select id="Fr_Menu" name="Fr_Menu" size="7" onChange="updateFr_Sub_menu(this.selectedIndex)">
    <option disabled >-- Menu --</option>
    <option value="Hommes">Hommes</option>
    <option value="Femmes">Femmes</option>
    <option value="Enfants">Enfants</option>
    <option value="Bébés">Bébés</option>
  </select>

  <select id="select_Fr_Sub_menu" name="Fr_Sub_menu" size="7" onchange="afficher_div(this.value);"></select>

  <div id="ma_div_1" class="mes_divs" style="display:none">blabla 01</div>
  <div id="ma_div_2" class="mes_divs" style="display:none">blabla 02</div>
  <div id="ma_div_3" class="mes_divs" style="display:none">blabla 03</div>
  <div id="ma_div_4" class="mes_divs" style="display:none">blabla 04</div>
  <div id="ma_div_5" class="mes_divs" style="display:none">blabla 05</div>
  <div id="ma_div_6" class="mes_divs" style="display:none">blabla 06</div>
  <div id="ma_div_7" class="mes_divs" style="display:none">blabla 07</div>
  <div id="ma_div_8" class="mes_divs" style="display:none">blabla 08</div>
  <div id="ma_div_9" class="mes_divs" style="display:none">blabla 09</div>
  <div id="ma_div_10" class="mes_divs" style="display:none">blabla 10</div>
  <div id="ma_div_11" class="mes_divs" style="display:none">blabla 11</div>
  <div id="ma_div_12" class="mes_divs" style="display:none">blabla 12</div>
  

  <script type="text/javascript">
    var Fr_Menu_list=document.getElementById('Fr_Menu');
    var Fr_Sub_menu_list=document.getElementById('select_Fr_Sub_menu');

    var Fr_Sub_menu=new Array()
    Fr_Sub_menu[0]=""
    Fr_Sub_menu[1]=["Valeur A1", "Valeur A2", "Valeur A3"]
    Fr_Sub_menu[2]=["Valeur B1", "Valeur B2", "Valeur B3"]
    Fr_Sub_menu[3]=["Valeur C1", "Valeur C2", "Valeur C3"]
    Fr_Sub_menu[4]=["Valeur D1", "Valeur D2", "Valeur D3"]
        
    function updateFr_Sub_menu(selectedcitygroup){
      Fr_Sub_menu_list.innerHTML = "";
      if (selectedcitygroup>0){
        for (i=0; i<Fr_Sub_menu[selectedcitygroup].length; i++){
            var opt = document.createElement('option');
            opt.value = i+1;
            opt.innerHTML = Fr_Sub_menu[selectedcitygroup][i];
            Fr_Sub_menu_list.appendChild(opt);
        }
      }
    }
    
    function afficher_div(id){
        console.log('id :' + id);
        hideAllDiv('mes_divs');
        document.getElementById('ma_div_'+id).style.display="block";
    }
    
    function hideAllDiv(clasName){
      console.log('on masque toutes les div.. qui ont la class : ' + clasName);
      var elements = document.getElementsByClassName(clasName);
      for (var i = 0; i < elements.length; i++){
         elements[i].style.display = 'none';
      }
    }
    
  </script>
</body>
</html>


A toi de l'adapter à tes besoins.

.

Messages postés
1003
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
3 juin 2021
16
Merci Jordane45 pour ton aide.
Cependant je rencontre un dysfonctionnement dans le code...

Lorsque je passe à la seconde ligne de mon premier select, la div est remise à
ma_div_1
et non pas par exemple à
ma_div_4
comme l'exemple ci-dessous :
Supposons mon Fr_Menu :
Homme
Femme
Enfant
Bébé
-------------------
Supposons mon Fr_Sub_menu :
Pour Homme : ma_div_1, ma_div_2, ma_div_3
Pour Femme : ma_div_4, ma_div_5, ma_div_6, ma_div_7
Pour Enfant : ma_div_8, ma_div_9, ma_div_10
Pour Bébé : ma_div_11, ma_div_12


Penses-tu pouvoir m'aider encore un peu ?
Messages postés
33128
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juillet 2021
3 635 >
Messages postés
1003
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
3 juin 2021

Le plus simple serait que tu nommes tes div avec une combinaison des index de ton tableau
Par exemple ..
Pour les div 1 2 et 3 (qui sont donc attachés à ta ligne : Fr_Sub_menu[1]=["Valeur A1", "Valeur A2", "Valeur A3"] ) il faudrai les nommer:
id="ma_div_1_0" , id="ma_div_1_1" id="ma_div_1_2"

le premier 1 correspond à la clé de ton tableau, les chiffres 0,1,2 étant la position dans la liste.

Un truc du genre
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>TEST</title>
</head>
<body>
	<h1>TEST</h1>
	<select id="Fr_Menu" name="Fr_Menu" size="7" onChange="updateFr_Sub_menu(this.selectedIndex)">
    <option disabled >-- Menu --</option>
    <option value="Hommes">Hommes</option>
    <option value="Femmes">Femmes</option>
    <option value="Enfants">Enfants</option>
    <option value="Bébés">Bébés</option>
  </select>

  <select id="select_Fr_Sub_menu" name="Fr_Sub_menu" size="7" onchange="afficher_div(this.value);"></select>

  <div id="ma_div_1_1" class="mes_divs" style="display:none">blabla 01</div>
  <div id="ma_div_1_2" class="mes_divs" style="display:none">blabla 02</div>
  <div id="ma_div_1_3" class="mes_divs" style="display:none">blabla 03</div>
  <div id="ma_div_2_1" class="mes_divs" style="display:none">blabla 04</div>
  <div id="ma_div_2_2" class="mes_divs" style="display:none">blabla 05</div>
  <div id="ma_div_2_3" class="mes_divs" style="display:none">blabla 06</div>
  <div id="ma_div_3_1" class="mes_divs" style="display:none">blabla 07</div>
  <div id="ma_div_3_2" class="mes_divs" style="display:none">blabla 08</div>
  <div id="ma_div_3_3" class="mes_divs" style="display:none">blabla 09</div>
  <div id="ma_div_4_1" class="mes_divs" style="display:none">blabla 10</div>
  <div id="ma_div_4_2" class="mes_divs" style="display:none">blabla 11</div>
  <div id="ma_div_4_3" class="mes_divs" style="display:none">blabla 12</div>
  

  <script type="text/javascript">
    var Fr_Menu_list=document.getElementById('Fr_Menu');
    var Fr_Sub_menu_list=document.getElementById('select_Fr_Sub_menu');

    var Fr_Sub_menu=new Array()
    Fr_Sub_menu[0]=""
    Fr_Sub_menu[1]=["Valeur A1", "Valeur A2", "Valeur A3"]
    Fr_Sub_menu[2]=["Valeur B1", "Valeur B2", "Valeur B3"]
    Fr_Sub_menu[3]=["Valeur C1", "Valeur C2", "Valeur C3"]
    Fr_Sub_menu[4]=["Valeur D1", "Valeur D2", "Valeur D3"]
        
    function updateFr_Sub_menu(selectedcitygroup){
      Fr_Sub_menu_list.innerHTML = "";
      if (selectedcitygroup>0){
        for (i=0; i<Fr_Sub_menu[selectedcitygroup].length; i++){
            var opt = document.createElement('option');
            opt.value = selectedcitygroup + '_' + parseInt(i+1);
            opt.innerHTML = Fr_Sub_menu[selectedcitygroup][i];
            Fr_Sub_menu_list.appendChild(opt);
        }
      }
    }
    
    function afficher_div(id){
        console.log('id :' + id);
        hideAllDiv('mes_divs');
        document.getElementById('ma_div_'+id).style.display="block";
    }
    
    function hideAllDiv(clasName){
      console.log('on masque toutes les div.. qui ont la class : ' + clasName);
      var elements = document.getElementsByClassName(clasName);
      for (var i = 0; i < elements.length; i++){
         elements[i].style.display = 'none';
      }
    }
    
  </script>
</body>
</html>
Messages postés
1003
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
3 juin 2021
16
Bonjour Jordane et merci beaucoup pour ton aide !