添加选项下拉通过JQuery AJAX请求(作为json对象)


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

我目前尝试进入JQuery,更具体地说,进入AJAX请求。

代码:
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>

每当我更改文档中的字段时,都会触发此函数。并且应该更新HTML下拉菜单中的元素。

AJAX请求工作了,但是下拉更新没有按预期工作。我尝试将一些<option>字段添加到<select>下拉列表中,id为id=system

然而,结果下拉菜单总是这样:

  • 请选择
  • [对象对象]

什么需要改变,所以我的函数添加我的json数据到我的下拉菜单?

从php脚本返回的JSON示例:
[
    {
        "solarSystemID": "30001171",
        "solarSystemName": "F4R2-Q"
    },
    {
        "solarSystemID": "30001182",
        "solarSystemName": "MB-NKE"
    },
    {
        "solarSystemID": "30004299",
        "solarSystemName": "Sakht"
    },
    {
        "solarSystemID": "30004738",
        "solarSystemName": "1-SMEB"
    }
]

solarSystemID应成为<option>的值,
solarSystemName应为文本

提前感谢你的帮助,我想我只是需要在正确的方向上一点点推动,让它最终按预期工作。

您可以使用map方法将Solar对象映射到option元素。

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