Выбрав из раскрывающегося списка, включите еще одно выпадающее меню

Question

Я пытаюсь создать форму, похожую на все онлайн-брокеров (например, автотрейдер и т. Д.). Под этим я подразумеваю, что у меня есть выбор для «Make», «Model» и «Year». Я бы хотел, чтобы модель и год были отключены до тех пор, пока пользователь не выберет «сделать» своего автомобиля, таким образом получив значение от «make» и изменив поле выбора модели, только модели для этого. И тогда то же самое для «лет» и так далее.

  <div class="form-group"> 
       <select id="make" class="form-control"> 
        <option>Make</option> 
        <option>Chevrolet</option> 
        <option>Ford</option> 
        <option>Toyota</option> 
        <option>GMC</option> 
       </select> 

     </div> 
     <div class="form-group"> 
       <select id="models" class="form-control models" disabled> 
        <option>Model</option> 

       </select> 
     </div> 

Это мой javascript. В голове моего html. Однако javascript работает неправильно в моем html-файле.

<script type='text/javascript'> 

    $(function(){ 
    //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 
     }); 
     }); 

    </script> 

Я начал основной jsfiddle. http://jsfiddle.net/rynslmns/N9XTZ/1/

Answer 1

Вы можете сделать одну из двух вещей:

1. вы можете настроить некоторые массивы в JavaScript, которые заполняемые со значениями
2. вы можете написать несколько AJAX звонков на ваш сервер, который будет получать значения на основе на основе вашей базы данных.

Вот пример, который реализует первый метод, который, вероятно, является хорошим местом для вас.

http://jsfiddle.net/N9XTZ/6/

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 out the existing selections 
    var newOptions = window[this.value]; 
    //populate the new selections 
    for (var i=0; i<newOptions.length; i++) { 
     $("#models").append("<option>"+newOptions[i]+"</option>"); 
    } 
    //enable the dropdown 
    $('#models').prop('disabled', false); 
}); 

Я не приукрасить его, ни я использую все лучшие практики (кэширование DOM выбора, локализации переменных, и т.д.). Но он делает то, что вы ищете, и вы можете немного поиграть с ним.

Примечание: это продолжение скрипки Кришны, поэтому возлагайте на него ответственность за получение первой части. Я думаю, однако, что я добавил ту часть, которую вы действительно искали.

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.