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>的{{1}}下拉列表中添加一些<select>字段。

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

请选择
[object Object]

需要更改什么才能将我的函数添加到我的下拉菜单中？

从我的php脚本返回示例JSON：

id=system

[ { "solarSystemID": "30001171", "solarSystemName": "F4R2-Q" }, { "solarSystemID": "30001182", "solarSystemName": "MB-NKE" }, { "solarSystemID": "30004299", "solarSystemName": "Sakht" }, { "solarSystemID": "30004738", "solarSystemName": "1-SMEB" } ]应该成为solarSystemID的价值 <option>应该是文字。

提前感谢您提供任何帮助，我想我只需要向正确的方向努力，以便最终按预期工作。

Answer 1

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

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

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

1 个答案: