0

我正在尝试根据第一次选择中选择的输入将值推送到品种下拉列表中。我有所有需要的数据。我只是不知道如何将其推入选择中。数据由breed_data.dog、breed_data.cat等访问。所以最初我在 change 函数中做了一个 each 循环。我不知道从哪里开始，任何提示将不胜感激。

   <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();
   });
4

2 回答 2

1 
$('#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);
  });
});

例子

  • 显示品种（如果有）
  • 启用品种下拉菜单（找到品种时）
  • 当“allBreeds”或没有找到匹配的品种时显示“选择品种”。
于 2013-09-06T16:57:54.527 回答
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);
});
于 2013-09-06T16:58:09.567 回答