Contenu d'une zone de list avec javascript

Fermé
confiance150 Messages postés 9 Date d'inscription jeudi 12 novembre 2009 Statut Membre Dernière intervention 13 mai 2013 - 21 avril 2012 à 12:24
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 5 mai 2012 à 21:20
Bonjour,

Je souhaite avoir 2 listes de sélection contenant les même item (éléments) avec la spécificité que lorsque un élément de la liste 1 a été choisi qu'elle ne puisse plus être choisi dans la liste 2 en affichant une alerte à l'utilisateur de ne plus faire ce choix.

J'ai besoin d'aide car je n'ai que quelques bribes de connaissances en javascript/jquery pour le
faire.

Un lien, un script je suis preneur.

Merci


6 réponses

Réponse 1 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
22 avril 2012 à 22:49
voilà un petit script exemple 
<html>
<script type="text/javascript">
function generation_liste2(){
	//objet liste1
	var liste1 = document.getElementById('liste1');
	//objet liste2
	var liste2 = document.getElementById('liste2');
	
	//recup de la valeur selectionnée dans liste 1
	var selection_liste1 = liste1.value;
	if(selection_liste1 != -1){
		//reup du texte de l'option selectionnée dans liste 1
		var texte_select_liste1 = liste1.options[liste1.selectedIndex].text;
		//message d'alerte
		alert("Vous ne pouvez plus choisir "+texte_select_liste1);
		//recup nbr elements dans la liste1
		var nb_elem = liste1.options.length;
		
		//boucle pour parcourir tous les elemnts de la liste 1 et generer la liste 2 a l'identique sauf la valeur selectionnée
		//on commence par vider eventuellement la liste2
		var nb_element_liste2 = liste2.options.length;
		for(a=0;a<nb_element_liste2;a++){
			liste2.options[liste2.length-1]=null;
		}
		for(i=0;i<nb_elem;i++){
			//lecture valeur de la ligne d'option
			var valeur_option = liste1.options[i].value;
			//lecture du texte de la ligne d'option (qui peut etre differente de la value, comme dans cet exemple)
			var texte_option = liste1.options[i].text;
			
			//generation de la deuxieme liste sauf pour valeur selectionnée dans la liste 1 et la ligne -- choisissez --
			if(valeur_option != selection_liste1 ){
				var ligne = new Option(texte_option,valeur_option,false,false);
				liste2.options[liste2.length]=ligne;
			}
			
		}
	}else{
		return false;
	}
	
}


</script>
<body>
<form name="form1" method="post" action="">
	<select name="liste1" id="liste1" onchange="generation_liste2();">
	<option value="-1">-- choisissez --</option>
	<option value="a">Lettre A</option>
	<option value="b">Lettre B</option>
	<option value="c">Lettre C</option>
	<option value="d">Lettre D</option>
	</select>
	<select name="liste2" id="liste2">
	<option value="-1">-- choisissez --</option>
	</select>

</form>
</body>
</html>
0
Réponse 2 / 6
confian150
24 avril 2012 à 21:17
Bonsoir,

Merci à Alain 42, j'ai testé le code et il fonctionne bien. Sauf qu'à présent j'ai voulu appliquée la fonction pour 5 zones de liste: liste1, liste2, Liste3, liste4, liste5.
Comment faire donc pour l'appliquer pour que la fonction soit accéssible aux cinq zones de listes.

Merci.
0
Réponse 3 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
24 avril 2012 à 21:50
voilà: 

<html>
<script type="text/javascript">
function generation_liste_suivante(liste_n,liste_n_plus1){
	//objet liste n
	var liste_n = document.getElementById(liste_n);
	//objet liste n+1
	var liste_n_plus1 = document.getElementById(liste_n_plus1);
	
	//recup de la valeur selectionnée dans liste n
	var selection_liste_n = liste_n.value;
	if(selection_liste_n != -1){
		//reup du texte de l'option selectionnée dans liste 1
		var texte_select_liste_n = liste_n.options[liste_n.selectedIndex].text;
		//message d'alerte
		alert("Vous ne pouvez plus choisir "+texte_select_liste_n);
		//recup nbr elements dans la liste_n
		var nb_elem = liste_n.options.length;
		
		//boucle pour parcourir tous les elemnts de la liste 1 et generer la liste 2 a l'identique sauf la valeur selectionnée
		//on commence par vider eventuellement la liste_n_plus1
		var nb_element_liste_n_plus1 = liste_n_plus1.options.length;
		for(a=0;a<nb_element_liste_n_plus1;a++){
			liste_n_plus1.options[liste_n_plus1.length-1]=null;
		}
		for(i=0;i<nb_elem;i++){
			//lecture valeur de la ligne d'option
			var valeur_option = liste_n.options[i].value;
			//lecture du texte de la ligne d'option (qui peut etre differente de la value, comme dans cet exemple)
			var texte_option = liste_n.options[i].text;
			
			//generation de la deuxieme liste sauf pour valeur selectionnée dans la liste n et la ligne -- choisissez --
			if(valeur_option != selection_liste_n ){
				var ligne = new Option(texte_option,valeur_option,false,false);
				liste_n_plus1.options[liste_n_plus1.length]=ligne;
			}
			
		}
	}else{
		return false;
	}
	
}


</script>
<body>
<form name="form1" method="post" action="">
	<select name="liste1" id="liste1" onchange="generation_liste_suivante('liste1','liste2');">
	<option value="-1">-- choisissez --</option>
	<option value="a">Lettre A</option>
	<option value="b">Lettre B</option>
	<option value="c">Lettre C</option>
	<option value="d">Lettre D</option>
	<option value="e">Lettre E</option>
	<option value="f">Lettre F</option>
	</select>
	<select name="liste2" id="liste2" onchange="generation_liste_suivante('liste2','liste3');">
	<option value="-1">-- choisissez --</option>
	</select>
	<select name="liste2" id="liste3" onchange="generation_liste_suivante('liste3','liste4');">
	<option value="-1">-- choisissez --</option>
	</select>
	<select name="liste2" id="liste4" onchange="generation_liste_suivante('liste4','liste5');">
	<option value="-1">-- choisissez --</option>
	</select>
	<select name="liste2" id="liste5">
	<option value="-1">-- choisissez --</option>
	</select>

</form>
</body>
</html>
0
confiance150 Messages postés 9 Date d'inscription jeudi 12 novembre 2009 Statut Membre Dernière intervention 13 mai 2013
25 avril 2012 à 09:18
Bonjour,
ok, bien reçu, j'avoue que j'ai du me débrouillé pour le faire mais ta solution est plus optimale que la mienne.
Je teste àà nouveau et reviens.
Merci.
0
Réponse 4 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
25 avril 2012 à 14:08
ok, on peut aussi améliorer encore en masquant les listes suivantes et faire apparaitre la n+1 seulement aprsè un choix dans la n, par action sur le style display none /block
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
confiance150
3 mai 2012 à 10:27
Bonjour,
Le test de la fonction avec listn et listn+1 comme parametres, n'a pas fonctionnée. J'ai dû me contententé de la première bien qque plus longue.

Merci
0
Réponse 6 / 6
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
5 mai 2012 à 21:20
tu as du faire une erreur en utilisant la fonction car chez moi ça fonctionne parfaitement
0

Discussions similaires

ca veut dire quoi wmg sur youtube ?
parissf -
cacadoigt -

27 réponses
Erreur la zone de données passée à un appel système est insu
Vincent -
Panth33ra -

5 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses
détail facture sfr data ?
BONO -
f76 -

9 réponses