javascript - 允许在下拉框中切换数据的单选按钮

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

I am unsure on how to toggle data that is dynamically generated.

要处理动态生成的数据，您应该使用事件委托(delegate) on() :

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

希望这对您有所帮助。