Discussion :

[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 :

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

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 :

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

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 :

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
<?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 :

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

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 :

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

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 :

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

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

bn continuation

[alen22]

merci pour votre réponse

je fait comme celle ci

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
<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 :

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

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 :

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

$('#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 :

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
 
<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 :

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

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 :

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
<?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 :

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

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 :

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

<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 :

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

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 :

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
 
<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 :

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

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 :

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

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 :

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
<?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 :

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
<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 :

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
<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 :

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

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 :

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
<?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 :

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
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 :

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

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 :

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
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 :

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
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 :

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
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 :

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

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

fait ça

Code :

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

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

bn continuation

[kamclasse]

essayez ça

Code :

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

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