I am working on a dropdown box that is populated dynamically using JSON data. The content in the dropdown can be categorized into 4 types, so I have included radio buttons to switch between these categories.
I have created HTML code to toggle between manually entered data in the dropdown, but I am unsure about how to achieve the same functionality for dynamically generated data.
Below is the current code snippet. Any help or suggestions are greatly appreciated.
<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>');
});
}
});
});