更新使用Ajax和Jquery基于另一个选择进行选择

Question

我无法根据为第一个选择的值来确定如何更新第二个选择框。 我需要使用硬编码的JSON作为第二个选择选项。

HTML：

    Makes:
    <select id="make" name="make" onchange="changeMake(this);">
        <option disabled="" selected="">Select Make</option>
        <option value="audi">Audi</option>
        <option value="mercedes">Mercedes-Benz</option>
        <option value="tesla">Tesla</option>            
    </select>
    <br>
    Models:
    <select id="model" name="model">        
    </select>

JS：

    var cars = [
                    {"Makes" : [
                        {"make": "audi", "models": ["A7","A8","R8"]}
                        {"make": "audi", "models": ["G-Class SUV","SLS-Class Coupe","C-Class Sedan"]}
                        {"make": "tesla", "models": ["Roadster","Model S","Model X"]}
                    ]}
                ];
  function changeMake(sel) {
     var selected_make = sel.options[sel.selectedIndex].value; 
     var select_model = document.getElementById('model');
     select.options.length = 0; 
     $.each(cars, function(data) {
         var options = cars.options;
         for (var i = 0; i < options.length;; i++) {
              var option = options.make[selected_make].models;
              select_model.options.add(new Option(option.models[i], option.models[i]));

          }
    });
} 

JSFiddle： http ： //jsfiddle.net/ND2NC/

谢谢你的帮助。

Answer 1

这是解决问题的一种方法。 我将你的硬编码cars json更改为更容易使用的东西。

var cars = {
    audi: ["A7","A8","R8"],
    mercedes: ["G-Class SUV","SLS-Class Coupe","C-Class Sedan"],
    tesla: ["Roadster","Model S","Model X"]
};

这是函数的其余部分：

function clearSelect(sel){
    var i;
    for(i=sel.options.length-1; i>=0; i--){
        sel.remove(i);
    }
}

function changeMake(sel) {
    var selected_make = sel.options[sel.selectedIndex].value; 
    var select_model = document.getElementById('model');

    // Remove all select options
    clearSelect(select_model);

    // Loop through each model of the selected make
    $.each(cars[selected_make], function(index, model) {
        // Create select option
        var option = document.createElement("option");
        option.text = model;
        option.value = model;
        // Add option to select
        select_model.options.add(option);
    });
} 

注意：这使用了很多javascript，这就是你之前所拥有的。 你可以用更少的javascript和更多的jQuery来做同样的事情。

链接到小提琴