js/jQuery如何將複選框值分配給div

Question

我正在使用Eric Hynds jQuery MultiSelect Widget從javascript文件填充。問題是這兩種選擇都會增加雙方。選項1-3只能添加到Main1-3，對於選項/ Main 4-6也是如此。請參閱我的它是如何工作小提琴和問題http://jsfiddle.net/3u7Xj/112/

我認爲這將是eaisiest打破它像

var lbl = $("#MDCselect").val(); 
     if (number1.checked) {... 
      ('.holder').append... 

var lbl2 = $("#ClinicalSelect").val(); 
      if (number2.checked) {... 
       ('.holder2').append... 

目前

$(document).ready(function() { 
    $(".multiselect").multiselect({ 
     header: "Choose up to 5 areas total", 
     click: function (event, ui) { 
      var number1 = $("#MDCselect").children(":checked").length, 
       number2 = $("#Clinicalselect").children(":checked").length; 

      if (ui.checked && ((number1 + number2 >= 5) || $(this).children(":checked").length >= 5)) { 
       return false; 
      } 

      var lbl = ui.value; 
      if (ui.checked) { 
       var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '') + '">'; 
       $("[id^=id]:checked").each(function() { 
        $(this).nextAll('.holder:first').append('<div>' + ctrl + lbl + '</div>'); 
       }); 
      } else { 
       $("[id^=id]:checked").each(function() { 
        $(this).nextAll('.holder:first').find('#' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '')).parent().remove(); 
       }) 
      } 
     }, 
     selectedList: 5 
    }); 
    $(".checkers").click(function() { 
     if (!$(this).is(':checked')) { 
      $(this).nextAll('.holder:eq(0)').find('div input').parent().remove(); 
     } else { 
      var checkedOnes = $('#MDCselect').nextAll('.ui-multiselect-menu').find('ul li input:checked'); 
      $(".holder").html(""); 
      for (var i = 0; i < checkedOnes.length; i++) { 
       var lbl = checkedOnes.eq(i).attr('value'); 
       var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '') + '">'; 
       $("[id^=id]:checked").each(function() { 
        $(this).nextAll('.holder:first').append('<div>' + ctrl + lbl + '</div>'); 
       }); 
      } 
     } 
    }); 
}); 

Answer 1

我不能，如果完全確定我得到你想要做的，試試這個，讓我知道這是否是你想要的是什麼，這裏是小提琴，如果你想嘗試一下http://jsfiddle.net/8xBcd/

我把包含div的主電源，這樣更容易爲不同電源選擇器。請檢查小提琴。

<div id="main1-3" > 
<input type="checkbox" name="chk1" value="Main1" id="id1" class='checkers'/><label for="Main1"><b>Main1</b></label> 
<div class="holder"></div> 
</br> 
    <input type="checkbox" name="chk2" value="Main2" id="id2" class='checkers'><label for="Main2"><b> Main2</b></label> 
<div class="holder"></div> 
</br> 
     <input type="checkbox" name="chk3" value="Main3" id="id3" class='checkers'><label for="Main3"><b> Main3</b></label> 
<div class="holder"></div> 
</div> 

<select id="MDCselect" multiple="multiple" class="multiselect"> 
    <option>1</option> 
    <option>2</option> 
    <option>3, this space</option> 
</select><br>