根據JSON填充選擇元素

Question

如何填充第二個選擇元素？ 我已經弄清楚如何做第一個。 但是，根據選擇的“制作”，我該如何第二次執行相同的操作？ 我試圖通過一些小小的步驟來講述自己，但是我認為這對我來說可能太高級了。

var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},{"name":"Spider","value":"22172"}]}';
var carobj = eval ("(" + cars + ")");
var select = document.getElementsByTagName('select')[0];

//print array elements out
for (var i = 0; i < carobj.USED.length; i++) {
    var d = carobj.USED[i];
    select.options.add(new Option(d.name, i))
};

Answer 1

如果我沒看錯您的問題，那么您想在第二選擇中填充第一選擇中制造商的模型。 請參閱下面的純JS方法（使用jsfiddle）。 如果可能的話，我建議使用jQuery，因為我更喜歡jQuery解決方案。

http://jsfiddle.net/m5U8r/1/

var carobj;

window.onload = function () {
    var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},    {"name":"Spider","value":"22172"}]}]}';

    carobj = eval ("(" + cars + ")");
    var makes = document.getElementById('make');

    for (var i = 0; i < carobj.USED.length; i++) {
        var d = carobj.USED[i];
        makes.options.add(new Option(d.name, i));
    }

    makes.onchange = getModels;
    getModels();
}

// add models based on make
function getModels () {
    var makes = document.getElementById('make');
    var make = makes.options[makes.selectedIndex].text;
    for (var i = 0; i < carobj.USED.length; i++) {
        if (carobj.USED[i].name == make) {
            var models = document.getElementById('model');
            models.options.length = 0;
            for (var j= 0; j < carobj.USED[i].models.length; j++) {
                var model = carobj.USED[i].models[j];                
                models.options.add(new Option(model.name, j));
            }
            break;            
        }
    }
}

我還建議您研究更安全的JSON解析。 如果在任何用戶輸入上運行eval，則存在安全風險。 您可以查看JSON.org及其json2.js 。 或者，如果您想使用jQuery： parseJSON 。 以下是jQuery版本：

jQuery.parseJSON(jsonString);

JSON解析技巧來自： 安全地將JSON字符串轉換為object 。