remplissage d'une liste deroulante

[alen22]

salut,

je travail avec une page jsp
mon but est de remplir une liste deroulante d'après un code de javascript

ce code dois parser une fichier test.xml pour récupérer les donnes nécessaires

j'arrive a écrire une code en javascript qui fait parser le fichier test.xml et j'arrive a récupéré les donnes de ce fichier et ce code est correcte

le fichier test.xml est

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
 
 
 
   </societe>
 
 
</societes>

le code de javascript est :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">var h1,y1;
			$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
h1=$(item).children("nom").text()+'';
			y1=$(item).children("nombre").text();
}
}
 
 
		</script>

donc le but est comment créer une liste déroulante ,cette liste déroulante dois contenir les noms de sociétés qui sont récupérer de fichier test.xml

le fichier test.xml dois contenir plusqu'une sociéte
exemple de fichier .xml

Code :

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
 
 
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
 
 
 
   </societe>
 <societe>
      <nom>Tochiba</nom>
      <nombre>25</nombre>
 
 
 
   </societe>
 
</societes>

le résultat dans la liste déroulante dois contenir

HP et IBM et Tochiba

et ceci grâce au code de javascript

je pense que je dois travailler dans le code de javascript avec un tableau

Code :

1
2
3
4
5
6
7
$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
		tabXML.push([$(item).children("nom").text(), $(item).children("nombre").text()])
....
....
...

merci d'avance

[kamclasse]

bonsoir,

j'ai pas bien comprit votre code mais si vous êtes arrivé à récupérer les valeurs de société dans le fichier xml vous pouvez remplir la liste déroulant facilement et comme ceci :

jquery :

Code :

1
2
3
4
5
6
7
8
9
10
 
 
<script language="javascript">
 
$(document).ready(function(){
 
$('#list').append('<option value="value1" > Option 1 </option>');
 
});
</script>

le html :

Code :

1
2
3
4
5
 
 
<select id="list">
 
</select>

bn continuation

[alen22]

merci pour votre réponse

je fait comme celle ci

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">var h1,y1;
			$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
			h1=$(item).children("nom").text()+'';
			y1=$(item).children("nombre").text();
 
 
 
           $('#list').append('<option value="h1" >h1</option>');
	 });
 
 
			 });
			});
 
		</script>

je travail avec ce fichier pour test

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
 
 
 
   </societe>
 
 
</societes>

le résultat de la liste déroulante contient h1 mais normalement dois contenir le contenu de h1 qui est HP

merci d'avance

[alen22]

j'essaye avec

Code :

$('#list').append('<option value="' $h1 '">' $h1 '</option>');

mais dans cet ca rien n'est affiché

[kamclasse]

bonjour,
c'est normale par ce que "h1" est différente de la variable h1

vous pouvez faire :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type="text/javascript">var h1,y1;
			$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
			h1=$(item).children("nom").text()+'';
			y1=$(item).children("nombre").text();
 
 
 
           $('#list').append('<option value="h1" >'+h1+'</option>');
	 });
 
 
			 });
			});
 
		</script>

bn continuation.

[kamclasse]

ou bien :

Code :

1
2
 
$('#list').append('<option value="'+h1+'" >'+h1+'</option>');

[alen22]

merci beaucoup pour la réponse
je la test et ca marche

si on travail avec ce fichier test.xml

Code :

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
 
 
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
 
 
 
   </societe>
 <societe>
      <nom>Tochiba</nom>
      <nombre>25</nombre>
 
 
 
   </societe>
 
</societes>

donc d'après le code corrige le liste déroulante affiche HP,IBM,Tochiba

je veux juste savoir si je choisie une proposition parmi les trois (comme exemple :HP)
je veux récupérer cette valeur (HP)dans le code de javascript

merci d'avance

[kamclasse]

bonjour,

c'est à l'aide de la fonction .change() regardez .change()

[alen22]

j'arrive à écrire le code qui est

Code :

1
2
3
4
5
6
 
function f3()
			   {
			   var i=document.getElementById('list').selectedIndex;
			   var res=document.getElementById('list').options[i].value;
}

mais celle ci quand j'ajoute un bouton

Code :

<input type="button" name="button" value="tester" onClick="f3()"/>

ce code est correcte et récupèrele valeur choisie (si on choisie dans la liste déroulante HP dans la fonction f3() et dans la variable res elle contient HP)

mais le but à ce moment est après récupérer la valeur choisie (exemple HP)

je dois parcourir le fichier test.xml pour récupéré le nombre corresponde au societe HP qui est 10


merci d'avance

[kamclasse]

bonjour,

d'abord c'est mieux d'utiliser le jquery ( .change() )

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
$(document).ready(function(){
 
$('#list').change(function(){
 
 
var valeur=$(this).val();
 
alert(valeur);
 
});
});

[kamclasse]

bonjour essayez ça

Code :

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
 
<script language="javascript">
 
$(document).ready(function(){
 
$('#list').change(function(){
 
 
var valeur=$(this).val();
var contVal=0; 
 
$(data).find("societes").children("societe").each(function(i, item){
 
			h1=$(item).children("nom").text()+'';
 
			if (h1 == valeur){ contVal++; }
 
 
 
	 });
 
 alert (contVal);
});
});
</script>

[alen22]

moi j'ai une question
tu met dans le code

Code :

if (h1 == valeur){ contVal++; }

vous incrémenter la valeur de contVal

mais moi je veux récupérer le nombre correspond au nom sélectionné

ce nombre existe dans le fichier test.xml

comme exemple si je choisie IBM le nombre doit etre

je pense que le code devrait etre

Code :

1
2
3
 
 
if (h1 == valeur){ contVal=$(item).children("nombre").text(); }

[kamclasse]

oui exactement

[alen22]

oui je deja teste
et merci pour pour vos réponses

juste je fait une petite modification au niveau au niveau de fichier test.xml

Code :

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
      <equipe>
          <specialite>DEV</specialite>
          <nombreequipe>36</nombreequipe>
    </equipe>
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
       <equipe>
          <specialite>finance</specialite>
          <nombreequipe>68</nombreequipe>
    </equipe>
 
 
   </societe>
 <societe>
      <nom>Tochiba</nom>
      <nombre>25</nombre>
       <equipe>
          <specialite>marketing</specialite>
          <nombreequipe>85</nombreequipe>
    </equipe>
 
 
   </societe>
 
</societes>

bien sur la liste déroulante contient :HP,IBM,Tochiba

et je veux quand je choisie HP je veux récupère nombreequipe qui est 36

j'essaye avec

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script language="javascript">
 
$(document).ready(function(){
 
$('#list').change(function(){
 
 
var valeur=$(this).val();
var contVal=0; 
 
$(data).find("societes").children("societe").each(function(i, item){
 
			h1=$(item).children("nom").text()+'';
 
			if (h1 == valeur){ contVal=$(item).children("equipe").text().children("nombreequipe").text(); }
 
 
 
	 });
 
 alert (contVal);
});
});
</script>

mais a mon avie elle n'a pas de sens

j'essaye avec autre code

Code :

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
<script language="javascript">
 
$(document).ready(function(){
 
$('#list').change(function(){
 
 
var valeur=$(this).val();
var contVal=0; 
 
$(data).find("societes").children("societe").each(function(i, item){
 
			h1=$(item).children("nom").text()+'';
 
			if (h1 == valeur){ 
$(data).find("societe").children("equipe").each(function(i, item){
contVal=$(item).children("nombreequipe").text(); 
 
 
         });
		}   
	 });
 
 alert (contVal);
});
});
</script>

pouvez m'aidez à corrigez ce code

[kamclasse]

je croix que ce code doit marché :

Code :

1
2
3
4
5
6
7
8
9
 
 
if (h1 == valeur){ 
$(item).children("equipe").each(function(i, item2){
contVal=$(item2).children("nombreequipe").text(); 
 
 
         });
		}

[alen22]

encore une fois merci pour vos réponses

juste cette astuces

je veux remplir une deuxième liste déroulante à travers de la premiere liste déroulante

pour li fichier test.xml

Code :

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
      <equipe>
          <specialite>DEV</specialite>
          <nombreequipe>36</nombreequipe>
    </equipe>
     <equipe>
          <specialite>finance</specialite>
          <nombreequipe>36</nombreequipe>
    </equipe>
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
       <equipe>
          <specialite>marketing</specialite>
          <nombreequipe>68</nombreequipe>
    </equipe>
    <equipe>
          <specialite>comerce</specialite>
          <nombreequipe>88</nombreequipe>
    </equipe>
 
 
 
</societes>

donc le resultat : la premiere liste deroulante dois contenir

HP et IBM

et si je choisi HP la deuxieme liste deroulante dois contenir DEV et finance( ces sont les specialite de equipe

j'arrive à faire un code mais le problème est que la dexieme liste contient des resultat qui sont repetes tand que je choisie de la premeire liste deroulante

je pense que le resulat donné est juste mais le problème que je dois videz la deuxième liste pour quel soit rempli des nouveaux valeurs

le code est :

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
 
			h1=$(item).children("nom").text()+'';
 
 
 
				$('#list').append('<option value="' +h1+ '">' +h1+ '</option>');
 
		  });
 
 
 
 
});
});
 
 
 
 
	$(document).ready(function(){
 
				$('#list').change(function(){
 
 
				var valeur=$(this).val();
 
 
 
				var contVal; 
				$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
										contVal=$(item2).children("specialite").text(); 
 
 
										$('#list3').append('<option value="' +contVal+ '">' +contVal+ '</option>');
 
										         });
 
 
 
 
 
 
 
									  }
 
 
 
						 });
 
 
 
				});
 
 
				});
				});

pour html

Code :

1
2
3
4
5
6
<select id="list">
 
</select>
<select id="list3">
 
</select>

[alen22]

je vérifie avec simple message d'alete que lorsque je choisie de la première liste déroulante elle récupère bien les donnée exactes

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
 
			h1=$(item).children("nom").text()+'';
 
 
 
				$('#list').append('<option value="' +h1+ '">' +h1+ '</option>');
 
		  });
 
 
 
 
});
});
 
 
 
 
	$(document).ready(function(){
 
				$('#list').change(function(){
 
 
				var valeur=$(this).val();
 
 
 
				var contVal; 
				$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
										contVal=$(item2).children("specialite").text(); 
 
 
										$('#list3').append('<option value="' +contVal+ '">' +contVal+ '</option>');
alert (contVal);
 
										         });
 
 
 
 
 
 
 
									  }
 
 
 
						 });
 
 
 
				});
 
 
				});
				});

et aussi elle rempli bien la deuxième liste déroulante

mais le problème est pour la premier fois elle rempli la deuxième liste déroulante

mais pour la deixieme fois elle rempli c juste avec des donnes correctes mais elle conserve aussi les anciens donnes(pour la première sélection)

donc comme je dis je dois videz la deuxième liste avant de la remplir de nouveau

donc le code

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
 
			h1=$(item).children("nom").text()+'';
 
 
 
				$('#list').append('<option value="' +h1+ '">' +h1+ '</option>');
 
		  });
 
 
 
 
});
});
 
 
 
 
	$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
// normalement ici je dois videz la liste #list3
				var valeur=$(this).val();
 
 
 
				var contVal; 
				$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
										contVal=$(item2).children("specialite").text(); 
 
 
		// ou bien  ici je dois videz la liste #list3	 avant de remlpir 						$('#list3').append('<option value="' +contVal+ '">' +contVal+ '</option>');
 
 
										         });
 
 
 
 
 
 
 
									  }
 
 
 
						 });
 
 
 
				});
 
 
				});
				});

[alen22]

j'essaye avec

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$(document).ready(function() {
			$.post('test.xml', function(data) {
			$(data).find("societes").children("societe").each(function(i, item){
 
 
			h1=$(item).children("nom").text()+'';
 
 
 
				$('#list').append('<option value="' +h1+ '">' +h1+ '</option>');
 
		  });
 
 
 
 
});
});
 
 
 
 
	$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
 
				var valeur=$(this).val();
 
 
 
				var contVal; 
				$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
										contVal=$(item2).children("specialite").text(); 
 
//ici la ligne ajouter								
	$('#list3').remove();	
 
 
							$('#list3').append('<option value="' +contVal+ '">' +contVal+ '</option>');
 
 
										         });
 
 
 
 
 
 
 
									  }
 
 
 
						 });
 
 
 
				});
 
 
				});
				});

mais le problème elle supprime totalement la deuxième liste déroulante

mais moi je veux juste vider son contenu avant de remplir de nouveau

[kamclasse]

je croix que à la place de

Code :

1
2
 
$('#list3').remove();

fait ça

Code :

1
2
 
$('#list3').html();

bn continuation

[kamclasse]

essayez ça

Code :

1
2
 
$('#list').html('');