javascript, используя поле выбора, чтобы заполнить другие поля выбора

Question

Я пытаюсь создать выбор Make, Model и Year, похожий на многие автомобильные сайты, такие как Autotrader. Однако мне трудно получить второй снимок выбора, чтобы заполнить его после того, как пользователь сначала выберет начальное раскрытие. Надеюсь на предложения.

Мой HTML:

<div class="col-md-4"> 
    <select id="make" class="form-control"> 
     <option>Make</option> 
     <option>Chevrolet</option> 
     <option>Ford</option> 
     <option>GMC</option> 
     <option>Toyota</option> 
    </select> 
</div> 
</div> 
<div class="form-group"> 
    <div class="col-md-4 col-md-offset-4 mob"> 
     <select id="models" class="form-control models" disabled> 
      <option>Model</option> 
      <option>Silverado</option> 
      <option>Suburban</option> 
      <option>Tahoe</option> 
     </select>    
    </div> 
</div> 

Моя JavaScript:

//setup arrays 
Chevrolet = ['Silverado','Suburban','Tahoe']; 
Ford = ['F150','Taurus','Pinto','Bronco']; 
Toyota = ['Camry','Tacoma','4Runner']; 
GMC = ['blah1','blah2','blah3']; 

$('#make').change(function() { 
    $('#models').prop('disabled', true); 
    $("#models").html(""); //clear existing options 

    var newOptions = window[this.value]; //finds the array w/the name of the selected value 
    //populate the new options 
    for (var i=0; i<newOptions.length; i++) { 
     $("#models").append("<option>"+newOptions[i]+"</option>"); 
    } 

    $('#models').prop('disabled', false); //enable the dropdown 
}); 

Вот мой jsfiddle: http://jsfiddle.net/rynslmns/W9TLT/

Answer 1

Вы не включили JQuery в вашей скрипке.

Тем не менее, вы не должны реально использовать глобальный, а не сделать свой собственный объект и слегка изменить код:

$(function(){  
    //setup arrays 
    var cars = { 
     "Chevrolet" : ['Silverado','Suburban','Tahoe'], 
     "Ford" : ['F150','Taurus','Pinto','Bronco'], 
     "Toyota" : ['Camry','Tacoma','4Runner'], 
     "GMC" : ['blah1','blah2','blah3'] 
    }; 

    $('#make').change(function() { 
     $("#models").html(""); //clear existing options 
     var newOptions = cars[this.value]; //finds the array w/the name of the selected value 
     //populate the new options 
     for (var i=0; i<newOptions.length; i++) { 
      $("#models").append("<option>"+newOptions[i]+"</option>"); 
     } 
     $('#models').prop('disabled', false); //enable the dropdown 
    }); 
}); 

http://jsfiddle.net/W9TLT/10/

Еще одно замечание. Отключение выпадающего меню в начале вашего кода, а затем включение его в конце не имеет никакого эффекта, кроме как включить выпадающий список. Из-за однопоточного характера браузеров/javascript отключить никогда не происходит. Все, что имеет значение, - это то, на что он установлен, когда код завершается.

Answer 2

Включить JQuery. Ваш пример работает.

Answer 3

В вашей скрипке нет загруженного jQuery!

$('#make').change(function() { 
    $('#models').prop('disabled', true); 
    $("#models").html(""); //clear existing options 
    var newOptions = window[this.value]; //finds the array w/the name of the selected value 
    //populate the new options 
    for (var i=0; i<newOptions.length; i++) { 
     $("#models").append("<option>"+newOptions[i]+"</option>"); 
    } 
    $('#models').prop('disabled', false); //enable the dropdown 
}); 

Working