11540 sujets

JavaScript, DOM et API Web HTML5

Créer des options de select en javascript

Bonjour,

J'aimerais utiliser du javascript pour créer les options des <select> via un fichier .json mais je n'y connais absolument rien en javascript!

Je m'explique: j'ai crée un formulaire où il doit y avoir une liste déroulante de pays.
Ces pays sont listés dans un fichier .json qui peut être mis à jour à tout moment.
Il me faut donc récupérer la liste des pays dans ce fichier .json et mettre ces pays dans des <option> de la balise <select>.

Comment faire?
Tout dépend de la manière dont tu as structuré ton fichier JSON.

Tu pourrais montrer un bout du code JSON ?
Naemesis a écrit :
Tout dépend de la manière dont tu as structuré ton fichier JSON.

Tu pourrais montrer un bout du code JSON ?


Bien sûr.

[
  {
    "code": "135", 
    "name": "A\u00e7ores"
  }, 
  {
    "code": "144", 
    "name": "Afghanistan (Etat Islamique Transitoire)"
  }, 
  {
    "code": "167", 
    "name": "Afrique du Sud"
  }, 
  {
    "code": "174", 
    "name": "Algerie"
  }, 
  {
    "code": "133", 
    "name": "Andorre (E)"
  }, 
  {
    "code": "134", 
    "name": "Andorre (F)"
  }, 
  {
    "code": "4", 
    "name": "Angola"
  }, 
]
Je ne suis de loin pas un expert, mais le JSON correspond à des objets, pour récupérer des données depuis un JSON, il faut faire : 
nomduJSON.attribut
//dans ton cas
nomdelobjetJSON.code
nomdelobjetJSON.name


(il me semble avoir lu sur un forum en cherchant pour te repondre qu'il ne fallait pas de guillemets autour des noms des attributs (code et name))
J'ai dû mal m'exprimer.
Il faut que je crée des options de select dynamiquement en javascript.
Les valeurs de ces <option> correspondraient aux noms des pays contenus dans un fichier .json (qui est accessible via une URL). Ce fichier .json est susceptible d'être mis à jour à tout moment.

Admettons que mon fichier .json au jour J contient les pays suivants: France, Allemagne, Espagne.
Il faut donc que je récupère ces pays et que je les mette dans des <option>.
Ce qui donnerait:
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Espagne</option>

Au jour J+1, mon fichier contient les pays suivants: France, Allemagne, Angleterre, Espagne, Grèce.
Il faudrait donc que ma liste déroulante se mette à jour automatiquement (sans que j'ai à récupérer le fichier .json, car je ne sais pas forcément que ce fichier .json a été modifié tel ou tel jour). Ma liste déroulante contiendrait donc:
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Angleterre</option>
<option value="4">Espagne</option>
<option value="5">Grèce</option>
Julien Royer a écrit :
Si, il en faut.


Donc j'ai rien dit Smiley lol

Et je ne comprends pas vraiment où tu veux en venir Yuuko, à ce moment-là, je ne comprend pas a quoi sert ton JSON
Modifié par Naemesis (31 May 2012 - 10:12)
Naemesis a écrit :


Donc j'ai rien dit Smiley lol

Et je ne comprends pas vraiment où tu veux en venir Yuuko, à ce moment-là, je ne comprend pas a quoi sert ton JSON


Dans mon json, il y a la liste des pays...Mais ce json peut être modifié par mes collègues, donc il faut que j'utilise ce json de façon dynamique! Sinon, ça m'obligerait à aller voir tous les jours si le fichier a été modifié, à le télécharger, et à l'utiliser pour faire ma liste déroulante.

EDIT: j'ai réussi en utilisant ce script:

$.getJSON("countries.json", function (data) {
    $.each(data, function (i, item) {
        $('<option>', {
            html: item.name + '</option>'
        }).appendTo('select');
    });
});

Modifié par Yuuko (31 May 2012 - 11:56)
Sujet clos
Aller à