Sujet Précédent Sujet Suivant

Afficher div selon option select

Résolu/Fermé
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 13 déc. 2017 à 17:55
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 15 déc. 2017 à 10:44
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

Réponse 1 / 2
guazdig
13 déc. 2017 à 20:42
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)
0
Réponse 2 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 déc. 2017 à 20:48
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.

.

0
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
14 déc. 2017 à 11:35
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 ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023
14 déc. 2017 à 15:17
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>
0
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
15 déc. 2017 à 10:44
Bonjour Jordane et merci beaucoup pour ton aide !
0

Discussions similaires

"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Option de connexion désactivé
Alice -
Navibot -

1 réponse
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses