11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fichier json pour menu déroulant

Bonjours,
Je souhaiterai créer un menu déroulant <select> avec HTML mais que les options sois gérer par un fichier json car la liste des possibilités évolue tout le temps.
pour faire simple les options du menu déroulant fait avec la balise <select> doivent être récupérer depuis le fichier json dans le quel elles sont écrite.

voici un bout du fichier json (l'ensemble et fait de la même façon):


var jlist_1 = [
	{"Value" = "Environnement SCCM"}
	{"Value" = "Installation d'applications"}
	{"Value" = "Déploiment d'applications mobiles ou environnement AirWatch"}
	{"Value" = "Baquaras"}
	{"Value" = "Installation de master et/ou outillage"}	
]

var jlist_2 = [
	{"Value" = "Information"}
	{"Value" = "Rappel"}
	{"Value" = "Avancement"}
	{"Value" = "Fin"}
]


Mon fichier HTML est basique je vous donne le code en place pour le moment:


<select id="list">
									<option>Sélectionnez votre problème</option>
									<option>Proposition 1</option>
									<option>Pro 2</option>
									<option>Pro 3</option>
									<option>Pro 4</option>
									<option>autre</option>
								</select>


en se qui concerne le js j'ai ceci:


var list = document.getElementById('list');
var Selection;

list.addEventListener('change', function() {
				
	switch(list.options[list.selectedIndex].innerHTML){
		case "Proposition 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;
	}
});


Je n'y connais rien en json pourriez vous donc m'aider ?
merci d'avance
Non mais en faite mon problème a été résolu j'ai oublier de supprimer le message Smiley sweatdrop
Modifié par _Blanck_ (21 May 2019 - 20:40)
Si c'est résolu c'est toujours intéressant de donner la solution en question pour que les prochains qui liront le sujet en ayant la même problématique trouve la réponse Smiley cligne
Réponse:

html:


<!DOCTYPE html>

<html>
	<head>

		<title> titre </title>
		<meta charset="utf-8">

		<script src='JSON/Listes.json'></script>

	</head>

	<body>

		<select id="list"></select>
		<select id="list_2"></select>

<!--Javascript-->
								
		<script type="text/javascript" src="Js/script.js"></script>
				
	</body>

</html>


js:


//Création des variables contenant les éléments 'list' 
var list = document.getElementById('list'); //liste des problèmes.
var list_2 = document.getElementById('list_2'); //liste des états du problème selectionner.

//Création de la variable contenant le lieu ou seront afficher les options selectionner.
var option_select = document.getElementById('option_select');

//Création des variables utiliser dans les scripts.
var Selection;
var vir_esc = ', ';

//configuration des options de la balise première <select> (options de la liste 1).
for(var i=0;i<jlist_problemes.length;i++){ //La boucle détermine de façons quasi-dinamique les options du fichier JSON a afficher.
	var newOption = new Option (jlist_problemes[i].Value, jlist_problemes[i].id);
	list.options.add (newOption); //Ajout de l'option a la balise <select> (ajout du choix dans la liste) précedement enregistrer dans la variable.
}

//configuration des options de la balise deuxième <select> (options de la liste 2).
for(var i=0;i<jlist_avancements.length;i++){
	var newOption = new Option (jlist_avancements[i].Value, jlist_avancements[i].id);
	list_2.options.add (newOption);
}


jlist_avancements et jlist_problemes sont des listes créer dans des fichiers JSON
Modifié par _Blanck_ (23 May 2019 - 11:32)
Bonjour,

Je travaille actuellement sur un morceau de code équivalent, je souhaitais m'inspirer du code ci-dessus. Par contre, je ne parviens pas à le faire tourner, seuls des menus vides s'affichent.
Pourriez-vous m'aider svp ?
Merci par avance !
Salut, je te conseil d'ouvrir un nouveau sujet avec ton propre code que l'on puisse voir, et les résultats détaillé que tu as (ou les diverses erreurs)
Sujet clos
Aller à