如何添加选择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