單選按鈕，允許在下拉框中切換數據

Question

我有一個下拉框，其內容由JSON文件動態生成。 下拉框中有很多內容，但是其中的內容可以全部歸為4類。 因此，我添加了單選按鈕來相應地切換下拉框中顯示的數據。

我已經敲了一些html，以在手動輸入到下拉菜單中的數據之間切換，但是我不確定如何切換動態生成的數據。

當前代碼如下所示。 提前致謝。

<script>
var listA = [{name:'ALM_1', value:'ALM_1'}, {name:'ALM_2', value:'ALM_2'}, {name:'ALM_3', value:'ALM_3'}];

var listB = [{name:'BR_1', value:'BR_1'}, {name:'BR_2', value:'BR_2'}, {name:'BR_3', value:'BR_3'}];

var listC = [{name:'BUG_1', value:'BUG_1'}, {name:'BUG_2', value:'BUG_2'}, {name:'BUG_3', value:'BUG_3'}];

var listD = [{name:'Feat_1', value:'Feat_1'}, {name:'Feat_2', value:'Feat_2'}, {name:'Feat_3', value:'Feat_3'}];

$(document).ready( function() {
  $("input[name='chk']").on('change',function() {

      if($(this).is(':checked') && $(this).val() == 'ALM')
      {
        $('#describe').empty()
        $.each(listA, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        });                  
      }
      else if($(this).is(':checked') && $(this).val() == 'BR')
      {
        $('#describe').empty()
        $.each(listB, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        }); 
      }
      else if($(this).is(':checked') && $(this).val() == 'BUG')
      {
        $('#describe').empty()
        $.each(listC, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        }); 
      }
       else if($(this).is(':checked') && $(this).val() == 'FEAT')
      {
        $('#describe').empty()
        $.each(listD, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        }); 
      }

  });
});  

Answer 1

我不確定如何切換動態生成的數據。

要處理動態生成的數據，您應該使用事件委托on() ：

$("body").on('change', 'input[name="chk"]', function() {
    //Your code here
})

希望這可以幫助。