Question

I would like to convert my current code to a dynamic checkbox. can anyone help me?

<select id="genre" name="genre">
                                    <option value="">-Select-</option>

<select name="category" id="category" multiple="multiple">
                                    <option>-Select-</option>

var options= {
val1:'option1',
val2:'option2',
val3:'option3',
val4:'option4',
}

$('#genre').change(function(){
    $('#category').children().remove().end().append('<option>-Select-</option>');
    if($('#genre').val() == 'Traditional'){
        $.each(traditionalOptions, function(val, text) {
            $('#category').append( new Option(text,text) ); 
        });

Answer 1

Are you looking for something like this:

<select id="genre" name="genre">
    <option value="">-Select-</option>
    <option value="classical">Classical</option>
    <option value="traditional">Traditional</option>
</select>
<div id="categories">
Categories go here
</div>

var OPTIONS_MAP = {
    classical: [
        { value: 'loud', text: 'Loud' },
        { value: 'louder', text: 'Louder' },
        { value: 'loudest', text: 'Loudest' }
    ],
    traditional: [
        { value: 'old', text: 'Old' },
        { value: 'older', text: 'Older' },
        { value: 'oldest', text: 'Oldest' }
    ]
};

$('#genre').change(function() {
    // Clear out the <div> where the checkboxes will go
    $('#categories').empty();

    // Add the category checkboxes for the genre
    var options = OPTIONS_MAP[$('#genre').val()];
    if (options) {
        $.each(options, function() {
            $('<label><input type="checkbox" name="category" value="'
                + this.value + '" />' + this.text
                + '</label><br />').appendTo('#categories'); 
        });
    } else {
        $('#categories').append('Categories go here');
    }
});

jsfiddle

I took the liberty of changing the options so they each have a value that can be different than the displayed text. There’s a lot of different ways to generate DOM elements with jQuery. I went with concatenating a long string of html. I also placed a “label” element around each checkbox since they should always have one.