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?

[_Blanck_]

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.

J'ai jamais dit cela il ne faut pas modifier met mot !
Je cherche a avoir une explication sur comment faire hors tu me corrige sur une syntaxe sans vraiment me répondre par rapport a mon problème de base.

[_Blanck_]

J'ai réglé mon problème grâce aux explications d'autre internaute (et pour répondre a certains non je n'ai pas eu de code près fait mais uniquement des explication claire )

Je donne donc ma solution qui, je le rappel, utilise un fichier JSON comme tableau JS:


Parti HTML/JS:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<select id="list_2">
 
	<script>
                var select = document.getElementById ("list_2");
                for(var i=0;i<jlist_1.length;i++){
                        var newOption = new Option (jlist_1[i].id, jlist_1[i].Value);
                        select.options.add (newOption);
                }
                console.log(jlist_1[0].id);
                console.log(jlist_1.length);
        </script>
</select>

Le console.log permet de vérifier que le tableau est bien présent via la console de debbug.


Partie fichier JSON:

Code :

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

1
2
3
4
var jlist_1 = [
	{"id" : "Proposition 1", "Value" : 1},
	{"id" : "Proposition 2", "Value" : 2}
]

[Invité]

Si tu regardes ce que j'ai écrit dans ce message, tu verras que je t'avais donné la structure du fichier json.


Et pour apporter une précision : tu n'utilises pas un "fichier JSON", mais un "OBJET JSON".

• "fichier" suppose de lire/inclure un fichier externe (extension .json), comme je l'ai fait.
• alors que dans ton cas, jlist_1 est un objet json, défini dans ton script (ou inclus via un script externe, avec l'extension .js).

[_Blanck_]

C'est vrais que tu ma donner la structure json je t'en remercie.