Ajouter des options à la liste déroulante via une requête JQuery AJAX (en tant qu'objet json)

GosuSan

J'essaye actuellement d'entrer dans JQuery et, pour être plus précis, dans les requêtes AJAX.

Code:
Javascript:

success: function(json) {
        console.log(json);
        var $el = $("#system");
        $el.empty(); // remove old options
        $el.append($("<option></option>")
            .attr("value", '').text('Please Select'));

        // for each set of data, add a new option
        $.each(json, function(value, key) {
            $el.append($("<option></option>")
                .attr("value", value).text(key));
        });

},

HTML:

<form id="filter">
    <label for="datepicker">
        Date: <input id="datepicker" onchange="updateSystems()" type="text" />
    </label>
    &nbsp;
    <label>from:
        <select id="timespan-from"  name="timespan-from" onchange="updateSystems()" size="1">
            <option value="0">0 Uhr</option>
            ...
            <option value="23">23 Uhr</option>
        </select>
    </label>
    &nbsp;
    <label>to:
        <select id="timespan-to" name="timespan-to" onchange="updateSystems()" size="1">
            <option value="0">23 Uhr</option>
            ...
            <option value="0">0 Uhr</option>
        </select>
    </label>
    &nbsp;
    <label>in System:
        <select id="system" name="system" size="1">
            <!-- this should be updated -->
            <option>Amarr</option>
            <option>JEIV-E</option>
            <option>Jita</option>
            <option>Litom</option>
            <option>Penis</option>
        </select>
    </label>
</form>

Cette fonction est déclenchée chaque fois que je change un champ dans mon document, et doit mettre à jour les éléments d'une liste déroulante html.

La requête AJAX fonctionne, mais la mise à jour de la liste déroulante ne fonctionne pas comme prévu. J'essaye d'ajouter quelques <option>champs à la <select>liste déroulante avec l'identifiant id=system.

Cependant, la liste déroulante des résultats ressemble toujours à ceci:

  • Veuillez sélectionner
  • [objet Objet]

Que faut-il changer pour que mes fonctions ajoutent mes données json à mon menu déroulant?

Exemple de retour JSON de mon script php:

[
    {
        "solarSystemID": "30001171",
        "solarSystemName": "F4R2-Q"
    },
    {
        "solarSystemID": "30001182",
        "solarSystemName": "MB-NKE"
    },
    {
        "solarSystemID": "30004299",
        "solarSystemName": "Sakht"
    },
    {
        "solarSystemID": "30004738",
        "solarSystemName": "1-SMEB"
    }
]

solarSystemIDdevrait devenir la valeur du <option>,
solarSystemNamedevrait être le texte.

Merci d'avance pour toute aide, je suppose que j'ai juste besoin d'un petit coup de pouce dans la bonne direction pour que cela fonctionne enfin comme prévu.

naortor

vous pouvez utiliser la méthode map pour mapper l'objet solaire à l'élément option.

$('#system').append(json.map(function(sObj){
    return '<option id="'+sObj.solarSystemID+'">'+ sObj.solarSystemName +'</option>'
}));

Articles connexes