jQuery/js分離2下拉值

Question

我正在使用Eric Hynds jQuery MultiSelect Widget。實際上，我使用2個獨立的小部件，當選中時，如果選中「主」複選框，則會創建一個動態複選框，並將值附加到相應的「主」複選框。請看我的小提琴裏面的評論來說明我的問題：http://jsfiddle.net/3u7Xj/52/

如何分離2個小工具以顯示在相應的部分，仍然只允許用戶從兩個選擇合併？

$(document).ready(function() { 
    $(".multiselect").multiselect({ 
     header: "Choose up to 5 areas total", 
     click: function (event, ui) { 

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

      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(); 
       }); 
      } 

     }, 
     selectedList:5 
    }); 
}); 

Answer 1

所以我修改了條件，它的工作原理應該是這樣，我希望它適合你。

var number1=$("#dropdown1").children(":checked").length, 
    number2=$("#dropdown2").children(":checked").length; 

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

Demo here

如果你想只有兩個，從兩個選擇和修改情況如下：

var number1=$("#dropdown1").children(":checked").length, 
    number2=$("#dropdown2").children(":checked").length; 

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

Demo here

適應於要求在評論

插入div中的單個分段。調整控制功能點擊

到：

$(this).parent("div").find("[id^=Main]:checked").each(function(){ 
     $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');  
}); 

Demo here