Question

我有一个地图对象，我将放置在我的控制器中的Spring ModelAndView中，并转发到我的jsp视图以填充选择。在第一次填充之后，我想用我使用jquery AJAX检索并使用jQuery.parseJSON转换为对象的json对象替换用于填充select的map对象。我可以使用json对象的内容动态替换select的全部内容吗？

Answer 1

对于实际修改选项，你真的不需要jQuery。您可以通过指定length框的options属性的SELECT属性清除旧选项，然后通过#add和new Option()添加新选项

以下是使用jQuery进行XHR部分然后直接执行选项的几个示例：

来自数组：

如果要从对象中的数组中绘制数据（在这种情况下，由结果对象上的属性options标识的数组）：

JSON：

{
  "options": [
    {"value": "New1", "text": "New Option 1"},
    {"value": "New2", "text": "New Option 2"},
    {"value": "New3", "text": "New Option 3"}
  ]
}

JavaScript的：

$.ajax({
  url: "http://jsbin.com/apici3",
  dataType: "json",
  success: function(data) {
    var options, index, select, option;

    // Get the raw DOM object for the select box
    select = document.getElementById('theSelect');

    // Clear the old options
    select.options.length = 0;

    // Load the new options
    options = data.options; // Or whatever source information you're working with
    for (index = 0; index < options.length; ++index) {
      option = options[index];
      select.options.add(new Option(option.text, option.value));
    }
  }
});

Live example

直接来自一个物体：

如果您将对象的属性名称用作option值，并将属性值用作选项文本：

JSON：

{
  "new1": "New Option 1",
  "new2": "New Option 2",
  "new3": "New Option 3"
}

JavaScript的：

$.ajax({
  url: "http://jsbin.com/apici3/2",
  dataType: "json",
  success: function(data) {
    var name, select, option;

    // Get the raw DOM object for the select box
    select = document.getElementById('theSelect');

    // Clear the old options
    select.options.length = 0;

    // Load the new options
    for (name in data) {
      if (data.hasOwnProperty(name)) {
        select.options.add(new Option(data[name], name));
      }
    }
  }
});

Live Example

更新：而不是

select.options.add(new Option(...));

你也可以这样做：

select.options[select.options.length] = new Option(...);

Live example

...我认为实际上我倾向于使用add类似于options数组的东西（我不是把它称为数组，因为它有一个方法， add，数组没有;并且因为如果你使用push，哪些数组做，它就不起作用。）

我已经在

上测试了这两种方法

IE6,7,8（Windows）
Chrome（Linux和Windows）
Firefox（Linux＆amp; Windows）
Opera（Linux＆amp; Windows）
Safari（Windows）

......两者都有效。也许有Mac的人可以为我在OS X上试用Safari。

我会说两种方式得到非常非常好的支持。

Answer 2

       $.ajax({
                type: 'POST',
                url: getpolicytypeUrl ,
                data: { sirket: companyname },
                success: function (data) {

                    $.each(data, function(index, element) {
                        $('#policyshortname').append($('<option>', {
                            text: element.policyShortname
                        }));
                        $('#policyshortname').show(300);
                    });

                }
            });


        $('#policyshortname').html('refresh',true);

如何使用jquery更新select的所有选项

2 个答案:

来自数组：

直接来自一个物体：