我有一串数据通过ajax进入页面。采用以下格式
[{"servername":"svrA"},{"servername":"svrB"},{"servername":"svrC"},{"location":"locA"},{"location":"locB"},{"location":"locC"}]
我想用数据填充两个选择框。
我尝试过以下伪代码的不同变体:
for each item in the json string
if obj == servername
add to selectbox Server
if obj == location
add to selectbox Location
任何想法都将不胜感激。感谢。
答案 0 :(得分:1)
var stuff = [{"servername":"svrA"},{"servername":"svrB"},{"servername":"svrC"},{"location":"locA"},{"location":"locB"},{"location":"locC"}];
var elems = {
"servername": jQuery('#select-server'),
"location": jQuery('#select-location')
};
stuff.forEach(function(item){
for(var selectName in elems){
if(typeof item[selectName] != 'undefined'){
var val = item[selectName];
elems[selectName].append(jQuery('<option/>').val(val).html(val));
}
}
});
并非forEach
在旧浏览器上不可用。上面的代码只是您可以使用的示例。
答案 1 :(得分:1)
有几种方法可以做到这一点,取决于你的代码将来如何发展,有些解决方案可能比其他解决方案稍微好一点或更灵活,但由于我没有这方面的知识,这里有一个关于如何做的例子在香草JS中做。
<强> JSFIDDLE 强>
var data = [
{"servername":"svrA"},
{"servername":"svrB"},
{"servername":"svrC"},
{"location":"locA"},
{"location":"locB"},
{"location":"locC"}
],
selects = {
servername: document.getElementById('servername'),
location: document.getElementById('location')
},
i = 0,
len = data.length,
item, prop, val;
for (; i < len; i++) {
prop = 'servername' in (item = data[i])? 'servername' : 'location';
val = item[prop];
selects[prop].add(new Option(val, val), null);
}
如果您计划为多个选择框提供相同类型的数据结构,而不是对引用selects
元素的select
对象进行硬编码,您也可以拉出选择id
动态使用for in
并使用通用方法解析select
引用。