Discussion :

[_Blanck_]

Bonjour,
Actuellement j'ai une liste déroulante fait avec html et css (voir code si dessous) et on ma demander de rentrer les valeurs de la liste (les différentes options) dans un fichier JSON et de faire en sorte a se que la liste affiche les options de ce dit fichier.

Code HTML :

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

1
2
3
4
5
6
7
8
9
<select id="list">
		<option>Pro 1</option>
		<option>Pro 2</option>
		<option>Pro 3</option>
		<option>Pro 4</option>
		<option>Pro 5</option>
		<option>Pro 6</option>
		<option>Autre</option>
</select>

Code CSS :

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

1
2
3
4
body{
	margin:5;
	padding:5;
}

JS:

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
var list = document.getElementById('list');
 
var Selection;
 
list.addEventListener('change', function() {
 
 
	switch(list.options[list.selectedIndex].innerHTML){
		case "Pro 1":
			Selection = 1;
			break;
		case "Pro 2":
			Selection = 2;
			break;
		case "Pro 3":
			Selection = 3;
			break;
		case "Pro 4":
			Selection = 4;
			break;
		case "Pro 5":
			Selection = 4;
			break;
		case 'Autre':
			Selection = 5;
			break;
		default:
			Selection = 0;
			break;
	}
});

Le problème c'est que je ne sais pas du tout comment faire pour que la liste récupère et affiche les options du fichier JSON...

pouvez vous m'aidez ?

[Invité]

Bonjour,

commence par ajouter des value aux <option> :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<select id="list">
	<option value="1">Pro 1</option>
	<option value="2">Pro 2</option>
	<option value="3">Pro 3</option>
	<option value="4">Pro 4</option>
	<option value="5">Pro 5</option>
	<option value="6">Pro 6</option>
	<option value="Autre">Autre</option>
</select>

Ce sont ces value que tu récupères en JS.

Code :

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

var Selection = list.value;

Il n'y a que le cas "Autre" à gérer.

[_Blanck_]

Je ne comprend pas.... moi les options je veut les récupérer depuis le fichier json je veut pas les écrire dans le code...

[Invité]

Et moi, je te parle de la structure HTML correcte pour un <select>.
Et donc c'est cette structure qu'il te faut reproduire APRES traitement du fichier json.

Le fichier json sera du style :
select-options.json

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
[
	{
		"text":"Pro 1",
		"value":"1"
	},
	{
		"text":"Pro 2",
		"value":"2"
	},
	{
		"text":"Pro 3",
		"value":"3"
	},
	//.....
	{
		"text":"Autre",
		"value":"Autre"
	},
]

[_Blanck_]

Et moi, je te parle de la structure HTML correcte pour un <select>.
Et donc c'est cette structure qu'il te faut reproduire APRES traitement du fichier json.

Je comprend et je le note mais cela ne règle pas mon problème...

[Invité]

Si "ton problème" c'est qu'"on écrive tout le code à ta place", alors tu as un autre problème : ça n'arrivera pas, car on n'est pas là pour ça.

Je t'ai fourni les bases.

[_Blanck_]

Alors..
Mon problème est réglé sans l'être.
explication: Le fichier JSON est utiliser pour être récupérer comme un tableau JS et non pas être récupérer avec Jquery (je ne sais pas si c'est clair) mais maintenant un autre problème se pose... comment, avec une boucle for en js, remplir les options de la balise <select> qui est en HTML?