GosuSan GosuSan - 3 months ago 16
PHP Question

Add options to dropdown via JQuery AJAX request (as json Object)

I currently try to get into JQuery and, to be more specific, into AJAX requests.

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">0 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>


This function is triggered whenever I change a field in my document,
and should update the elements of a html dropdown.

The AJAX request works, but the dropdown-update does not work as intended. I try to add some
<option>
fields to the
<select>
dropdown with the id
id=system
.

However, the result dropdown always looks like this:


  • Please Select

  • [object Object]



What needs to be changed so my functions adds my json data to my dropdown menu?

Example JSON return from my php script:

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


solarSystemID
should become the value of the
<option>
,

solarSystemName
should be the text.

Thanks in advance for any help, I guess I just need a little push in the right direction for it to finally work as intended.

Answer

you can use the map method for mapping Solar object to option element.

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