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

Question

我正在使用从javascript文件填充的Eric Hynds jQuery MultiSelect Widget。我可以通过从下拉列表中选择动态添加复选框。我试图将新的复选框和下拉框的“值”附加到出现在“主”复选框下，如果它也被选中。为了帮助评论中说明：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/