Contenu d'une zone de list avec javascript
confiance150
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Contenu d'une zone de list avec javascript
- Alternative zone telechargement - Accueil - Outils
- List disk - Guide
- Directory list & print - Télécharger - Divers Utilitaires
- Créer une liste déroulante excel - Guide
- Word a trouvé du contenu illisible - Guide
6 réponses
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>
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.
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.
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>
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question