使用單個json字符串填充多個選擇框

Question

我有一串數據通過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

任何想法將不勝感激。 謝謝。

Answer 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 。 上面的代碼只是您可以使用的示例。

Answer 2

有幾種方法可以做到這一點，取決於你的代碼將來如何發展，一些解決方案可能會比其他解決方案稍微更好或更靈活，但由於我沒有這方面的知識，這里有一個關於如何在香草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);
}

如果您計划為多個選擇框使用相同類型的數據結構，而不是硬編碼引用select元素的selects對象，您還可以使用for in動態提取select id for in並使用通用方法解析select引用。