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

我有一个下拉框，其中的内容由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>');
        }); 
      }

  });
});  

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'}]；
$（文档）.ready（函数（）{
$（“input[name='chk']”）。在（'change'，function（）上{
if（$（this）.is（':checked'）&&&$（this.val（）=='ALM'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
});                  
}
else if（$（this）.is（':checked'）&&&$（this.val（）='BR'））
{
$（'#descripe'）.empty（）
$.each（列表B，函数（索引，值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
else if（$（this）.is（':checked'）&&&$（this.val（）='BUG'））
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
如果（$（this）.is（':checked'）&&&$（this.val（）=='FEAT'）
{
$（'#descripe'）.empty（）
$.each（列表、函数（索引、值）{
$（'#descripe'）.append（''+value.name+''）；
}); 
}
});
});  

我不确定如何切换动态生成的数据

要处理动态生成的数据，应在（）上使用事件委派

：

希望这有帮助。
单选按钮是如何创建的？嗨，人造丝，它们是在html中创建的。像这样的东西；“
嗨，Zakaria，谢谢你的帮助。这对我当前的代码来说是如何工作的？例如，它如何知道每个单选按钮应该显示哪些数据。干杯
$("body").on('change', 'input[name="chk"]', function() {
    //Your code here
})