Listes affichées dynamiquement - Javascript

Résolu
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -  
puma67000 Messages postés 163 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je n'ai aucune notion de javascript à part les bases rudimentaires, j'ai cherché longtemps sur internet pour trouver une solution à mon problème mais en vain. Voilà mon problème: sur mon site, j'aimerais afficher un formulaire dans lequel apparait une liste <select>. Je souhaite qu'en fonction de l'élément de la liste (<option>) choisi par l'utilisateur, apparait en bas une autre liste <select> correspondante. Par exemple, l'utilisateur voit s'afficher une liste de produits cosmétiques. Une fois qu'il choisit un de ces produits, une autre liste apparaît plus bas lui proposant les différentes formes d'emballages correspondant au produit qu'il vient de sélectionner.

J'espère que j'ai été assez clair. SVP, si quelqu'un a un script tout prêt ou une ébauche de script, ça serait sympa de me le communiquer.

merci d'avance,

7 réponses

Réponse 1 / 7
Templier Nocturne Messages postés 7734 Date d'inscription   Statut Membre Dernière intervention   1 106
 
ben j'apprend tout comme toi (enfin je pense) mais est-ce que un truc du genre

if option = x

then ...
0
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Merci pour la réponse Templier. Cela dit, ça ne m'avance pas trop. A bientôt,
0
Réponse 2 / 7
Marco la baraque Messages postés 996 Date d'inscription   Statut Contributeur Dernière intervention   329
 
Bonsoir,
Ce que tu souhaites faire, c'est un composant qui est souvent utilisé (je crois qu'on appelle ça des listes liées ou un truc du genre).
En général, tu as simplement 2 listes, et le choix d'un item dans la première liste détermine les items qui seront présents dans la seconde.

Si tu veux le réaliser toi-même, ce n'est pas très compliqué. Je te mets sur la voie :

Première solution (pas terrible) :
Tu définis 2 tableaux en javascript. Le premier est la liste de tous les choix possibles de ta liste 1. Le second est un tableau associatif : à chaque valeur du tableau 1, tu associes un tableau correspondant aux choix que tu auras dans la liste 2.
Avantage : pas d'aller-retour serveur
Inconvénients : pas très modulaire, tableau définis "en dur" dans le code : pas très maintenable

Seconde solution (mieux selon moi) :
Tu définis ta liste 1 côté serveur (en php par exemple). Tu crées ta page dynamiquement grâce à cette liste 1. Quand tu sélectionnes une valeur de cette liste, tu appelles une fonction javascript. Cette fonction exécute une XmlHttpRequest qui va te chercher la liste des items qui vont être affichés dans la liste 2.
Avantages : maintenable car tu peux très bien définir tes listes dans des fichiers de configuration... les modifier à souhaite avec un code générique
Inconvénient : l'aller-retour au serveur (mais bon, c'est le prix à payer pour avoir une bonne application :D)

Cordialement
0
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Merci Marco,

Je me penche plutôt pour la solution N° 1, je vais essayer de coder tout ça et si je te contacterai au cas où j'aurai un problème ;-)
0
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Salut Marco,

Comme je disais, je n'ai que quelques notions rudimentaires en javascript et j'apprends sur le tas. J'ai opté pour la 1ère solution que tu as proposée. Je peux construire les 2 tableaux (1 pour la 1ère liste et 1 associatif pour les listes correspondantes à chaque élément de 1er tableau) mais je ne vois pas comment les afficher sous forme de listes (<select>), et d'autre part je ne sais pas comment faire en sorte qu'en fonction du choix effectué par l'utilisateur (clic sur un élément de la 1ère liste) la liste correspondante s'affiche (tableau 2). je suis vraiment paumé là! ;-)

STP, donne moi plus de détails!

A+
0
Marco la baraque Messages postés 996 Date d'inscription   Statut Contributeur Dernière intervention   329 > momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Salut,
Regarde donc ceci : 
Fichier index.html :
<html>
	<head>
		<title>Test CCM</title>
		<script type="text/javascript" src="js.js"></script>
	</head>
	
	<body>
		<script type="text/javascript">addLoadEvent(loadList1);</script>
		<form>
			<select id="list1" style="width: 100px;" onChange="loadList2(this.value);">
			</select>
		
			<select id="list2" style="width: 100px;">
			</select>
		</form>
	</body>
</html>

Fichier js.js :
/*Fonction addLoadEvent développée par Simon Willison*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

/*Définition des deux tableaux*/
var tab1 = new Array("choix1", "choix2");
var tab2 = new Array();
tab2["choix1"] = new Array("sous-choix1_1", "sous-choix1_2", "sous-choix1_3");
tab2["choix2"] = new Array("sous-choix2_1", "sous-choix2_2", "sous-choix2_3");

/*On remplit la première liste avec les valeurs inscrites dans le tableau 1*/
function loadList1() {
	//on récupère l'élément
	var list1 = document.getElementById("list1");
	for (var i = 0; i < tab1.length; i++) {
		//on crée une nouvelle option
		var item = document.createElement('option');
		item.value = tab1[i];
		item.innerHTML = tab1[i];
		//on ajoute l'option à la liste
		list1.appendChild(item);
	}
	
	//on affiche la liste2 qui correspond au premier élément de la liste1
	if (tab1.length > 0) {
		loadList2(tab1[0]);
	}
}

function loadList2(list1Value) {
	var list2 = document.getElementById("list2");
	//Premièrement on supprime tous les items de la liste
	var toDelete = list2.childNodes;
	while (list2.hasChildNodes()) {
		list2.removeChild(toDelete[0]);
	}
	
	//Ensuite on définit les nouveaux items, ceux qui sont associé à l'élément affiché dans la liste1
	var tab = tab2[list1Value];
	for (var i = 0; i < tab.length; i++) {
		var item = document.createElement('option');
		item.value = tab[i];
		item.innerHTML = tab[i];
		list2.appendChild(item);
	}
}


Cordialement,
0
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   > Marco la baraque Messages postés 996 Date d'inscription   Statut Contributeur Dernière intervention  
 
C'est génial!! Je te remercie énormément pour ton aide Marco. C'est ce que je voulais.
Dis-moi, si ça ne t'embête pas j'ai encore un truc à te demander. J'aimerais qu'au départ, l
a List1 soit fixée sur un élément du genre "Faire votre choix" et la List2 désactivée.
C'est à partir du moment où l'utilisateur fait son choix dans List1 que la List2 correspondante apparaît.

Merci encore!
0
Réponse 3 / 7
Marco la baraque Messages postés 996 Date d'inscription   Statut Contributeur Dernière intervention   329
 
Rebonsoir,
Il faut remplacer les fonctions loadList1 et loadList2 par les suivantes : 
/*On remplit la première liste avec les valeurs inscrites dans le tableau 1*/
function loadList1() {
	//on récupère l'élément
	var list1 = document.getElementById("list1");
	for (var i = 0; i < tab1.length; i++) {
		//on crée une nouvelle option
		var item = document.createElement('option');
		item.value = tab1[i];
		item.innerHTML = tab1[i];
		
		//si l'option est la première (Veuillez...), alors on la sélectionne par défaut
		if (i == 0) {
			item.selected = true;
		}
		
		//on ajoute l'option à la liste
		list1.appendChild(item);
	}
	
	//on affiche la liste2 qui correspond au premier élément de la liste1
	if (tab1.length > 0) {
		loadList2(tab1[0]);
	}
}

function loadList2(list1Value) {
	var list2 = document.getElementById("list2");

	var toDelete = list2.childNodes;
	var tab = tab2[list1Value];
		
	//Premièrement on supprime tous les items de la liste
	while (list2.hasChildNodes()) {
		list2.removeChild(toDelete[0]);
	}
		
	if (tab) {
		//Ensuite on définit les nouveaux items, ceux qui sont associé à l'élément affiché dans la liste1
		for (var i = 0; i < tab.length; i++) {
			var item = document.createElement('option');
			item.value = tab[i];
			item.innerHTML = tab[i];
			list2.appendChild(item);
		}
		list2.disabled = false;
	}
	else {
		//S'il n'y a aucune entrée pour la valeur dans la liste 1, alors on désactive la liste2
		list2.disabled = true;
	}
}


Cordialement,
0
momo_72 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
E X C E L L E N T !!! C'est exactement ce que je recherchais depuis des semaines.

Je te dois une fière chandelle :-)

Merci encore pour ton aide.

Cordialement,
0
Réponse 4 / 7
puma67000 Messages postés 163 Date d'inscription   Statut Membre Dernière intervention  
 
pas le tuto mais le contenu du choix se fera comment?
0

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

Posez votre question
Réponse 5 / 7
Marco la baraque Messages postés 996 Date d'inscription   Statut Contributeur Dernière intervention   329
 
Bonsoir,
Regarde le post 6, les listes sont chargées dynamiquement en javascript.

Cordialement,
0
Réponse 6 / 7
puma67000 Messages postés 163 Date d'inscription   Statut Membre Dernière intervention  
 
et en français ça donne quoi? le java c'est pas mon domaine
0
Réponse 7 / 7
puma67000 Messages postés 163 Date d'inscription   Statut Membre Dernière intervention  
 
svp aidez moi à comprendre je débute en js, ça fait 4 jours que je suis sur ma page et je n'arrive pas à faire apparaitre uun texte
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
un hyperviseur a été détecté. les fonctionnalités nécessaire
dsx6 -
brucine -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses