Listes deroulantes lieées Javascript / HTML

Résolu/Fermé

PandaHugsU Messages postés 16 Date d'inscription vendredi 29 avril 2011 Statut Membre Dernière intervention 9 mai 2013 - 10 juil. 2012 à 16:23
PandaHugsU Messages postés 16 Date d'inscription vendredi 29 avril 2011 Statut Membre Dernière intervention 9 mai 2013 - 11 juil. 2012 à 09:23

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> 

function choix_1(form) { 

var i = form.vehicule.selectedIndex; 
var tablength = tab.length; // longueur du tableau

if (i == 0) { 
return;
}

switch (i) { 
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]; 
}
}

</script>
</head>

Merci d'avance pour vos réponses
Panda.

A voir également:

Listes deroulantes lieées Javascript / HTML
Telecharger javascript - Télécharger - Langages
Editeur html - Télécharger - HTML
Créer des listes déroulantes excel - Guide
Excel listes déroulantes en cascade - Guide
Html download - Télécharger - HTML

1 réponse

Réponse 1 / 1

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
10 juil. 2012 à 18:17

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>

PandaHugsU Messages postés 16 Date d'inscription vendredi 29 avril 2011 Statut Membre Dernière intervention 9 mai 2013
11 juil. 2012 à 09:23

J'etait donc au final asser loin du resultat ...
Merci beaucoup pour ta réponse rapide et bien expliquée.
a+

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise <br> ou <br />

Image cliquable dans html

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters