Нажатие данных на выбор, основанный на вводе другого выберите

Question

Я пытаюсь вывести значения в породу, исходя из ввода, выбранного в первом выборе. У меня есть все необходимые данные. Я просто не знаю, как это сделать. Доступ к данным осуществляется по команде breed_data.dog, breed_data.cat и т. Д. Поэтому изначально я сделал каждый цикл внутри функции изменения. Я не знаю, с чего начать, любые советы будут очень признательны.

<form id="filter" class="filter" action="http://dev/petlist/public/site/index" accept-charset="utf-8" method="post"> 
     <select name="petsDropDown" id="form_petsDropDown"> 
     <option value="allPets">All Pets</option> 
     <option value="barnyard">Barnyard</option> 
     <option value="bird">Bird</option> 
     <option value="cat">Cats</option> 
     <option value="dog">Dogs</option> 
     <option value="horse">Horse</option> 
     <option value="pig">Pigs</option> 
     <option value="smallfurry">Smallfurry</option> 
     </select>   
     <select name="breedDropDown" id="form_breedDropDown"> 
     <option value="select_breed">Select Breed</option> 
     </select>   
    </form> 


    $(function(){ 
     $('#form_petsDropDown').change(function(){ 
     $('#form_breedDropDown').prop('disabled',($(this).val()=='allPets')); 
     $(breed_data).each(function() { 
      /*console.log(breed_data.dog); 
       console.log(breed_data.cat); 
       console.log(breed_data.smallfurry); 
       console.log(breed_data.bird); 
       console.log(breed_data.pig); 
       console.log(breed_data.horse);*/ 
     }); 
     }).change(); 
    }); 

Answer 1

$('#form_petsDropDown').change(function(){ 
    $('#form_breedDropDown').prop('disabled',(this.value === 'allPets')); 

    var options = $([]), 
     data = this.value in breed_data ? breed_data[this.value] : []; 

    $.each(data, function(k,v) { 
      var opt = $('<option />', {text: v, value: v}); 
      options = options.add(opt) 
    }); 

    $('#form_breedDropDown').html(options); 
}); 

Answer 2

$('#form_petsDropDown').change(function(){ 
    var breed = $(this).val(), // get current pet 
     breeds = breed in breed_data // get breeds based on pet 
      ? breed_data[breed] // load matches 
      : {'select_breed':'Select Breed'}; // default when none are found 
     $breeds = $('#form_breedDropDown'); // alias 

    // disable when necessary 
    $breeds.prop('disabled', !(breed in breed_data)).empty(); 

    // populate results 
    $.each(breeds, function(v,k){ 
     $('<option>',{'value':v}).text(k).appendTo($breeds); 
    }); 
}); 

Example

• Показывает породы (если имеется)
• Позволяет породы раскрывающийся (когда найдены породы)
• Обозначает "Выбор породы", когда "allBreeds" или нет найдена соответствующая порода.