通过 jQuery AJAX 更新选择框选项？答案

【问题标题】：Updating select box options via jQuery AJAX?通过 jQuery AJAX 更新选择框选项？
【发布时间】：2009-06-24 18:51:33
【问题描述】：

是否有某种类型的插件可以做到这一点？服务器将返回包含选项标签和值的 JSON 内容。

我可以手动完成，我只是想看看是否有更简单的方法。

【问题讨论】：

如果您想替换整个元素，您可以将远程脚本配置为简单地返回一个完全格式化的选择（包括选项）。但是“手动”更新选项元素也不过几行代码，所以不知道用jQuery插件是否合适。

标签： jquery ajax plugins

【解决方案1】：

遍历 json 并在每个文本/值对上执行此操作（很好地跨浏览器工作）：

var opt = document.createElement('option');
opt.value = "someValue";
opt.appendChild(document.createTextNode("someText"));
$('#mySelect').append(opt);

【讨论】：

【解决方案2】：

在将 html 插入元素之前，我实际上只是遍历列表中的项目并生成 html。现在你提到它可能有一个插件。

var selectHtml = ''
foreach obj Item in jsonobject.list)
  selecthtml += "<option value="+ item.value +">" + item.label + "</option>"

$('selectList').html(selectHtml);

或类似的东西

【讨论】：

【解决方案3】：

我使用 javascript、jQuery 和 AJAX 方式通过以下方式使用 JSON 数据更新选择框。它非常干净简洁，完美地完成了这项工作。

$.getJSON(url, data, function(responseJSON){ // GET JSON value from the server
    $("#mySelect option").remove(); // Remove all the <option> child tags from the select box.
    $.each(responseJSON.rows, function(index, item) { //jQuery way of iterating through a collection
        $('#mySelect').append($('<option>')
            .text(item.label)
            .attr('value', item.value));
                });
            });

【讨论】：