Discussion :

[lapartdombre]

Bonjour,

j'aimerais savoir comment créer une liste déroulante entièrement en javascript

Merci

[lapartdombre]

en fait j'ai un petit problème avec une liste déroulante. J'ai une première liste déroulante. Qui en fonction de la valeur sélectionné affiche soit un champ text, soit une deuxième liste déroulante rempli dynamiquement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<th width="18%"><bean:message key="facture.recherche.regroupementResultat"/> :</th>
			<td width="18%">
				<html:select property="regroupement"  onchange="javascript:reloadListe('invoiceSearchSend')">
					<html:option value="pli"><bean:message key="facture.recherche.regroupementResultat.pli"/></html:option>
					<html:option value="document"><bean:message key="facture.recherche.regroupementResultat.document"/></html:option>
				</html:select>
			</td>
			<th width="18%"><bean:message key="facture.recherche.tri"/> :</th>
			<td width="18%">
				<span id="document" style="display: block"  >
				<html:select name="invoiceDocumentsForm" property="query.tri">
					<html:option value="1"><bean:message key="facture.recherche.numPli"/></html:option>
					<html:option value="2"><bean:message key="facture.recherche.numClient"/></html:option>
					<html:option value="3"><bean:message key="facture.recherche.tri.dateFacturation"/></html:option>
					<html:option value="4"><bean:message key="facture.recherche.numDocument"/></html:option>
				</html:select>
				</span>
				<span id="pli" style="display: none;" >
					<bean:message key="facture.recherche.numPli"/>
				</span>
			</td>

Mais j'ai un problème pour remplir cette deuxième liste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
//recharger la liste deroulante de tri
function reloadListe(form){
	var objLinkGrpSort = new Object();
	var fieldTri = window.document.forms[form].elements["query.tri"];
	var fieldRegroupement = window.document.forms[form].regroupement;
	var RegroupementValue = fieldRegroupement.options[fieldRegroupement.selectedIndex].value;
	var optionSplit;
 
	//recuperer les libelles dans le formulaire
	objLinkGrpSort.document = new Array();
	for(var i=0;i<triDocList.length;i++){
		objLinkGrpSort.document[objLinkGrpSort.document.length++]= "" + triDocList[i] + "|" + i;
	}
	objLinkGrpSort.pli = new Array();
	for(var i=0;i<triPliList.length;i++){
		objLinkGrpSort.pli[objLinkGrpSort.pli.length++]= "" + triPliList[i] + "|" + i;
	}
 
	if(RegroupementValue == "pli"){
 
		window.document.getElementById('document').style.display='none';
     	window.document.getElementById('pli').style.display='block';
	}else{
		//affecter les options a la liste deroulante
		fieldTri.options.length = 0;
		for(var i=0; i<objLinkGrpSort[RegroupementValue].length; i++) {
			optionSplit = objLinkGrpSort[RegroupementValue][i].split("|");
			fieldTri.options[fieldTri.options.length++]=new Option(optionSplit[0], optionSplit[1]);
		}
 
		window.document.getElementById('pli').style.display='none';
     	window.document.getElementById('document').style.display='block';
	}
}

J'ai comme erreur :
fieldTri.options has no properties[/code]

[denisC]

<html:select property="regroupement" onchange="javascript:reloadListe('invoiceSearchSend')">

L'argument de ta fonction JS devrait le nom de ton formulaire. Typiquement, avec Struts, c'est le nom de la form associé (à verifier dans le code source HTML généré).

Vérifie que c'est bien le cas, je pense que c'est d'ici que viens l'erreur (enfin eventuellement).

Bonne chance

[lapartdombre]

Je ne pense pas car j'ai redéfinit mon formulaire avec un styleId et c'est lui que je passe en paramètre donc c'est correct.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<html:form action="/addStatsRecherche.do" styleId="invoiceSearchSend"  >

[denisC]

var fieldTri = window.document.forms[form].elements["query.tri"];

Non, pas d'accord. Le formulaire est ici adressé par son nom (attribut name) et non par son identifiant (attribut id).

Si tu veux utiliser l'id (ce qui est une bonne idée), il faut utiliser:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var fieldTri = window.document.getElementById(form).elements["query.tri"];

Voila voila

[lapartdombre]

Je pensais que les deux fonctionnaient. Mais ca ne change rien à mon problème