jquery - 复选框的动态下拉列表

Question

我想将我当前的代码转换为动态复选框。谁能帮我？

<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

您是否正在寻找这样的东西：

<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

我冒昧地更改了选项，因此它们每个都有一个与显示的文本不同的值。使用 jQuery 生成 DOM 元素有很多不同的方法。我去连接一长串html。我还在每个复选框周围放置了一个“标签”元素，因为它们应该总是有一个。