Обновление Выберите с помощью 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

Вот один из способов решения вашей проблемы. Я изменил ваш hardcoded 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.

Link to Fiddle