javascript - 从多选 jQuery UI 小部件动态添加复选框

Question

我正在使用Eric Hynds jQuery MultiSelect Widget这是从 javascript 文件填充的。我可以通过从下拉列表中进行检查来动态添加复选框。我正在尝试附加新的复选框和下拉复选框的“值”，以显示在“主”复选框下(如果也选中了该复选框)。为了帮助说明里面的评论:http://jsfiddle.net/3u7Xj/12/

引用文献:

<select id="select" multiple="multiple" class="multiselect">
</select>
<input type="checkbox" name="chkMain1" value="Main1" id="Main1"><label for="Main1">Main1</label><br />
<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2">Main2</label><br />
<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3">Main3</label><br />

从 js 文件填充下拉小部件:

var MYdata=[{
    "Value":"1",
    "ValueText":"name1"
}
,{
    "Value":"2",
    "ValueText":"name2"
}
,{
    "Value":"3",
    "ValueText":"name3"
}];    
$('#select').html(function(){
    return $.map(MYdata, function(v) {
        return "<option id='"+ v.Value +"'>" + v.Value + "-" + v.ValueText +"</option>";
    }).join('');
});

任何帮助将不胜感激

Answer 1

希望这能为您提供一些如何完成的指导..

click: function (event, ui) {
            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id='+lbl+']').parent().remove();
                });
            }

            if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
                return false;
            }

        }

示例:

http://jsfiddle.net/trevordowdle/3u7Xj/14/