我有一个地图对象我正在我的控制器中的一个
Spring ModelAndView中,并转发到我的jsp视图来填充选择.在第一次填充之后,我想替换用于填充select的map对象,并使用jQuery对象进行检索,并使用jQuery.parse
JSON转换为对象.我可以用json对象的内容动态地替换select的全部内容吗？
解决方法
为了实际修改这些选项,你不需要jQuery.您可以通过分配SELECT框的options属性的length属性来清除旧选项,然后通过#add和new Option()添加新选项.
以下是使用jQuery进行XHR部分的几个示例,然后直接执行选项：
从数组：
如果您从对象中的数组绘制数据(在这种情况下,由生成的对象上的属性选项标识的数组)：
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));
}
}
});
直接从一个对象：
如果您使用对象的属性名称作为选项值,并将属性值作为选项文本：
JSON：
{
"new1": "New Option 1","new2": "New Option 2","new3": "New Option 3"
}
JavaScript的：
$.ajax({
url: "http://jsbin.com/apici3/2",success: function(data) {
var name,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(...);
…我认为实际上我会倾向于使用选项数组类似东西的add方法(我不是称它为数组,因为它有一个方法,添加,数组没有;因为如果你使用push,哪些数组有,它不起作用).
我已经测试了两种方法
> IE6,7,8(Windows)
> Chrome(Linux和Windows)
> Firefox(Linux& Windows)
> Opera(Linux& Windows)
> Safari(Windows)
…和两个工作.也许有Mac的人可以在OS X上尝试Safari.
我会说两种方式都非常非常支持.
