通过JQuery AJAX请求向下拉列表添加选项（作为json对象）

Question

我目前尝试进入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>字段添加到ID为id=system的<select>下拉列表中。

但是，结果下拉列表始终如下所示：

• 请选择
• [对象对象]

什么需要更改，以便我的函数将我的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应该是文本。

在此先感谢您的帮助，我想我只需要向正确的方向稍加推动，即可使其最终按预期工作。

Answer 1

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

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