你如何更新的选择与jQuery的所有选项 [英] How do you update all options of a select with jquery

问题描述

我有的ModelAndView 地图中的对象，我将在春天我的控制器，并转发到我的jsp视图来填充一个选择。之后它填充的第一次，我想更换用于填充选择一个JSON对象，我检索使用jQuery和AJAX转换为使用jQuery.parseJSON对象地图对象。我可以动态的JSON对象中的内容替换选择的全部内容？

I have a map object I am placing in a Spring ModelAndView in my controller and forwarding to my jsp view to populate a select. After it populates the first time, I want to replace the map object used to populate the select with a json object I am retrieving using jquery AJAX and converting to an object using jQuery.parseJSON. Can I dynamically replace the entire contents of the select with the contents of the json object?

推荐答案

有关实际修改的选项，你真的不需要jQuery的。您可以通过分配到的选项长度属性清除旧的选项的属性选择中，然后通过 #add 并添加新的选项新的选项（）。

For actually modifying the options, you don't really need jQuery. You can clear the old options by assigning to the length property of the options property of the SELECT box, and then add new options via #add and new Option().

下面是几个使用jQuery的XHR部分例子，然后直接做选择：

Here are a couple of examples using jQuery for the XHR part and then doing the options directly:

如果您正在绘制从阵列中的数据对象中（在这种情况下，一个数组确定由酒店选项生成的对象）：

If you're drawing the data from an array within the object (in this case, an array identified by the property options on the resulting object):

JSON：

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

JavaScript的：

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));
    }
  }
});

活生生的例子

如果您使用的是对象的属性名称为选项值，属性值作为选项的文字：

If you're using the object's property names as option values, and the property values as the option text:

JSON：

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

JavaScript的：

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));
      }
    }
  }
});

活生生的例子

更新：不是

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

您也可以这样做：

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

活生生的例子

......我认为其实我会倾向于使用过添加在选项方法阵列 - 因为如果你使用添加，即数组没有称这是一个数组>推，其中阵列的不的都有，这是行不通的）。

...which I think actually I would tend to use over the add method on the options array-like-thing (I'm not calling it an array because it has a method, add, that arrays don't have; and because if you use push, which arrays do have, it doesn't work).

我已经测试了这两种方法

I've tested both methods on

• IE6,7,8（视窗）
• 在Chrome浏览器（Linux和放大器; Windows中）
• 在火狐（Linux和放大器; Windows中）
• 在歌剧（Linux和放大器; Windows中）
• 在Safari浏览器（Windows）中

...和两个工作。也许有人与Mac可以尝试Safari浏览器在OS X我。

...and the both work. Perhaps someone with a Mac could try Safari on OS X for me.

我会说，这两种方法都非常，非常好支持。

I'd say both ways are very, very well supported.

这篇关于你如何更新的选择与jQuery的所有选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！