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
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
A voir également:
- Contenu d'une zone de list avec javascript
- Zone telechargement - Accueil - Outils
- List disk - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Telecharger javascript - Télécharger - Langages
- Word a trouvé du contenu illisible - Guide
6 réponses
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
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>
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.
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
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>
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
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.
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.
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
5 mai 2012 à 21:20
tu as du faire une erreur en utilisant la fonction car chez moi ça fonctionne parfaitement