如何添加選擇jqueryMobile 1.4.2所有選項自定義選擇

Question

我使用jqueryMobille版本1.4.2 我有一週的天選擇下拉

<select class="userInput" name="selectDays" id="selectDays" multiple="multiple" data-native-  menu="false"> 
<option data-placeholder="Days of the week"></option> 
<option value="" >Select All</option> 
<option value="Mon" >Monday</option> 
<option value="Tue" >Tuesday</option> 
<option value="Wed" >Wednesday</option> 
<option value="Thu" >Thursday</option> 
<option value="Fri" >Friday</option> 
<option value="Sat" >Saturday</option> 
<option value="Sun" >Sunday</option> 
</select> 

我要添加的所有選擇選項可以選擇所有選項。此外，當任何其他選項被取消選擇時，它應該顯示切換行爲。 但是，當我在Select All框中添加任何事件時，它不會調用它，因爲jquery使用所有選項創建虛擬選擇，並且事件不會傳遞給它。 基本上，它應該像bootstrap multiselect一樣工作。 http://davidstutz.github.io/bootstrap-multiselect/ 我試圖將這也與我的應用程序集成，但它不起作用。 請建議任何其他選擇。

Answer 1

這不是在jQM小部件中提供的，但有一點額外的腳本可以實現此功能。

考慮選擇標記：

是JQM彈出被賦予選擇ID +「 - 菜單」的ID

<select class="userInput" name="selectDays" id="selectDays" multiple="multiple" data-native-menu="false" > 
    <option val="placeholder" data-placeholder="true">Days of the week</option> 
    <option value="" >Select All</option> 
    <option value="Mon" >Monday</option> 
    <option value="Tue" >Tuesday</option> 
    <option value="Wed" >Wednesday</option> 
    <option value="Thu" >Thursday</option> 
    <option value="Fri" >Friday</option> 
    <option value="Sat" >Saturday</option> 
    <option value="Sun" >Sunday</option> 
</select> 

的菜單列表。因此，我們可以處理的菜單按鈕的點擊事件，看看是否選擇所有被點擊：

var IsSelectAllOperation = false; 
$(document).on("click", "#selectDays-menu li a", function(){ 
    //was select all clicked (data-option-index="1") 
    var idx = $(this).closest("li").data("option-index"); 
    if (idx == '1') { 
     var IsChecked = $(this).hasClass("ui-checkbox-on"); 
     if (IsChecked){ 
      //select all 
      IsSelectAllOperation = true; 
      $("#selectDays-menu li a").each(function(index) { 
       var IsHidden = $(this).closest("li").hasClass("ui-screen-hidden"); 
       var NotChecked = $(this).hasClass("ui-checkbox-off"); 
       if (!IsHidden && NotChecked){ 
        $(this).click(); 
       } 
      }); 
      IsSelectAllOperation = false; 
     } 
    } else { 
     //uncheck the select all option 
     if (!IsSelectAllOperation) { 
      var $selall = $('#selectDays-menu li[data-option-index="1"] a'); 
      if ($selall.hasClass("ui-checkbox-on")){ 
       $selall.click(); 
      } 
     } 
    } 
}); 

我們使用事件代理來處理所謂的「selectDays菜單」中選擇菜單中的任何錨點擊。然後我們檢查包含錨點的LI上名爲option-index的數據屬性。選項0是隱藏的佔位符，1是全選選項，其餘是2,3,4等。

所以如果點擊1，我們看它是否被選中或未選中。如果正在檢查，則重複其餘選項，如果它們尚未檢查，請觸發它們上的點擊事件。

如果有其他選項被點擊，我們取消選中全部選項。

這裏是一個工作DEMO