結合/「美化」這兩個功能使用1類

Question

如何結合以下兩個功能只使用一個類？隨着我如何使用它們，將會非常方便。我想要的功能組合允許每個下拉3個選擇，但結合.multiselect1和.multiselect2只是.multiselect

下面是我使用這些下拉列表控件的小提琴：http://jsfiddle.net/3u7Xj/124/

$(document).ready(function() { 
      $(".multiselect1").multiselect({ 
       header: "Choose up to 5 areas total", 
       click: function (event, ui) { 
        var number1 = $("#MDCselect").children(":checked").length; 
        if (ui.checked && (number1 >= 3)) { 
         return false; 
        } 
       }, 
       selectedList: 5 
      }); 
     }); 
     $(document).ready(function() { 
      $(".multiselect2").multiselect({ 
       header: "Choose up to 5 areas total", 
       click: function (event, ui) { 
        var number2 = $("#Clinicalselect").children(":checked").length; 
        if (ui.checked && (number2 >= 3)) { 
         return false; 
        } 
       }, 
       selectedList: 5 
      }); 
     }); 

Answer 1

你可以改變它，如下所示（jsFiddle）：

$(document).ready(function() { 
     $(".multiselect").multiselect({ 
      header: "Choose up to 5 areas total", 
      click: function (event, ui) { 
       var number = $(this).children(":checked").length; 
       if (ui.checked && (number >= 3)) { 
        return false; 
       } 
      }, 
      selectedList: 5 
     }); 
    }); 

少許修改的HTML被要求：既多選課程設置multiselect。

但是有一個問題。它說，你最多可以選擇5個區域，但限制設置爲3.這僅僅是一個簡明例子的症狀嗎？

Answer 2

你可以寫這樣的代碼：

<select multiple="multiple" class="mp"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
</select> 

<select multiple="multiple" class="mp"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
</select> 

和JavaScript

$(document).ready(function() { 
      $(".mp").multiselect({ 
       header: "Choose up to 5 areas total", 
       click: function (event, ui) { 
        var number1 = $(this).children(":checked").length; 
        if (ui.checked && (number1 >= 3)) { 
         return false; 
        } 
       }, 
       selectedList: 5 
      }); 
     }); 

結帳這個demo

Answer 3

查看更新的小提琴。您可以使用$（本）

http://jsfiddle.net/3u7Xj/125/

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

       var number1 = $(this).children(":checked").length; 
       if (ui.checked && (number1 >= 3)) { 
        return false; 
       } 
      }, 
      selectedList: 5 
     }); 
    });