Javascript 基于json填充select元素

如何填充第二个select元素？我已经想出了如何做第一个。但如何根据选择的“Make”对第二个进行相同的操作？我试着在采取一些小步骤的同时说服自己，但我认为这对我来说可能太高级了

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

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”：“value”：“21685”}，{“name”：“name”，“value”：“rd31”}：“21782”}，{“名称”：“RSX”，“价值”：“21784”}，{“名称”：“SLX”，“价值”：“21879”}，{“名称”：“TL”，“价值”：“22237”}，{“名称”：“TSX”，“价值”：“22248”}，{“名称”：“活力”，“价值”：“22362”}，{“名称”：“ZDX”，“价值”：“32888”}，}，{“名称”：“阿尔法·罗密欧”，“价值”：“20047”，“模型”：“{“名称”：“164”，“价值”：“20325”}，{“名称”：“8c”；“价值”：“蜘蛛名”：“价值”："22172"}]}';
var carobj=评估（“（“+cars+”）；
var select=document.getElementsByTagName（'select'）[0]；
//打印数组元素
对于（变量i=0；i

如果我没看错你的问题，你想用第一个选择中的make模型填充第二个选择。下面是纯JS方法（使用JSFIDLE）。如果可能，我建议研究jQuery，因为我更喜欢jQuery解决方案

---

JSON解析提示来自：。

您想用指定的值填充第二个选项还是用相应的值填充所有选项？很抱歉，我没有看到此响应。我希望填充特定make的所有值。谢谢您的回答。这就是我要找的。jQuery解决方案会有什么不同？@KeLBIZZLE -很好听到。老实说，jQuery不是必需的，只是我通常默认使用它。在我看来，它使编写代码与DOM的交互速度更快。我主要考虑的更新（jQuery或不）是更安全的JSON解析。我用一些信息更新了我的答案。谢谢你的提示。当材料没有使用最佳实践时，自学是很困难的。

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

jQuery.parseJSON(jsonString);