0

最初の選択で選択された入力に基づいて、品種ドロップダウンに値をプッシュしようとしています。私は必要なすべてのデータを持っています。それを選択にプッシュする方法がわかりません。データは、breed_data.dog、breed_data.cat などによってアクセスされます。最初に、変更関数内に 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」または一致する品種が見つからない場合は、「Select Breed」を表示します。
于 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 に答える