Listes deroulantes lieées Javascript / HTML
Résolu
PandaHugsU
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
PandaHugsU Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
PandaHugsU Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Eh bien ça fait une journée que je bloque a chercher sur pas mal de forum je doit pas être loin de la solution... voila mon problème:
J'essaye d'écrire un programme sous forme de formulaire on choisit le type de véhicule et son type (puis son énergie etc...) mais j'ai un problème avec les listes déroulantes qui doivent être liée. Mais problème les listes :
Voiture :-Citadine
-Compact
-Berline
-4x4
et Vélo : - Normal
- Electrique
n'ont pas la même taille. Comment faire pour que la 2éme liste déroulante se mette au bon nombre de choix ?
Voici la fonction de mon code le problème c'est que le document.write() ne marche pas correctement la 2eme liste est name="type"
<script> <!-- script java -->
function choix_1(form) { <!-- Fonction pour le 1er menu deroulant liéé au second -->
var i = form.vehicule.selectedIndex; <!-- numero du choix selectioné -->
var tablength = tab.length; // longueur du tableau
if (i == 0) { <!-- si pas de choix retourne rien -->
return;
}
switch (i) { <!-- autre choix possible -->
case 1 : var tab = new Array ('Citadine','Compact','Berline','4x4'); break;
case 2 : var tab = new Array ('Electrique','Normal',''); break;
case 3 : var tab = new Array ('TER','TGV',''); break;
}
for (i=0;i<tablength;i++) {
tab[i].disabled = true; // On met les choix en disable = true
if(option) tab[i].style.display = 'none'; // Si le choix est nul on met rien
form.type.options[i+1].tab=tab[i]; <!-- associé le i-eme choix du 2eme menu a la i-eme+1 option -->
}
}
</script>
</head>
Merci d'avance pour vos réponses
Panda.
Eh bien ça fait une journée que je bloque a chercher sur pas mal de forum je doit pas être loin de la solution... voila mon problème:
J'essaye d'écrire un programme sous forme de formulaire on choisit le type de véhicule et son type (puis son énergie etc...) mais j'ai un problème avec les listes déroulantes qui doivent être liée. Mais problème les listes :
Voiture :-Citadine
-Compact
-Berline
-4x4
et Vélo : - Normal
- Electrique
n'ont pas la même taille. Comment faire pour que la 2éme liste déroulante se mette au bon nombre de choix ?
Voici la fonction de mon code le problème c'est que le document.write() ne marche pas correctement la 2eme liste est name="type"
<script> <!-- script java -->
function choix_1(form) { <!-- Fonction pour le 1er menu deroulant liéé au second -->
var i = form.vehicule.selectedIndex; <!-- numero du choix selectioné -->
var tablength = tab.length; // longueur du tableau
if (i == 0) { <!-- si pas de choix retourne rien -->
return;
}
switch (i) { <!-- autre choix possible -->
case 1 : var tab = new Array ('Citadine','Compact','Berline','4x4'); break;
case 2 : var tab = new Array ('Electrique','Normal',''); break;
case 3 : var tab = new Array ('TER','TGV',''); break;
}
for (i=0;i<tablength;i++) {
tab[i].disabled = true; // On met les choix en disable = true
if(option) tab[i].style.display = 'none'; // Si le choix est nul on met rien
form.type.options[i+1].tab=tab[i]; <!-- associé le i-eme choix du 2eme menu a la i-eme+1 option -->
}
}
</script>
</head>
Merci d'avance pour vos réponses
Panda.
A voir également:
- Listes deroulantes lieées Javascript / HTML
- Listes déroulantes excel - Guide
- Listes déroulantes en cascade excel - Guide
- Editeur html - Télécharger - HTML
- Telecharger javascript - Télécharger - Langages
- Br html ✓ - Forum Webmastering
1 réponse
voilà avec pas mal de rectifs:
<script type="text/javascript"> <!-- script javascript ne pas confondrejava et javascript ce n'est pas la même chose ! deux langages totalement différents -->
function generation_liste2(id_lire,id_ecrire) { <!-- Fonction pour le second menu deroulant liéé au choix dans le premier -->
var liste2="";
//on commence par effacer eventuellement la deuxieme liste au cas ou elle serait affichée, si on reclique sur choisissez
document.getElementById(id_ecrire).innerHTML="";
//on lit le choix dans liste 1
var choix_vehicule=document.getElementById(id_lire).value;
// var tablength = tab.length; // longueur du tableau //la tu rentre la longueur du tableau avant même de l'avoir défini puisque c'est plus bas que tu le fait
switch (choix_vehicule) {
//on peut tout mettre dans le switch case
//il faut les ' de part et d'autre des 0 voiture velo etc..
case '0' : return; break;<!-- si pas de choix retourne rien -->
<!-- autre choix possible -->
case 'voiture' : var tab = new Array ('Citadine','Compact','Berline','4x4'); break;
case 'velo' : var tab = new Array ('Electrique','Normal',''); break;
case 'train' : var tab = new Array ('TER','TGV',''); break;
}
//generation de la deuxieme liste
liste2 += '<select name="type">';
for (j=0;j<tab.length;j++) { //il te manquait le point entre tab et length, de plus tu as mis deux fois la variable i ?? c'est une possible source d'erreurs
liste2 += '<option value="'+tab[j]+'">'+tab[j]+'</option>';
}
liste2 += '</select>';
//ecriture de la deuxieme liste dans le div la page
document.getElementById(id_ecrire).innerHTML=liste2;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<select name="vehicule" id="id_liste_vehicule" onchange="generation_liste2('id_liste_vehicule','id_liste2');">
<option value="0">-- choisissez --</option>
<option value="voiture">Voiture</option>
<option value="velo">Vélo</option>
<option value="train">Train</option>
</select>
<div id="id_liste2"><!-- la va etre ecrite la deuxieme liste --></div>
</form>
</body>
Merci beaucoup pour ta réponse rapide et bien expliquée.
a+