如何在 jqueryMobile 1.4.2 自定义选择中添加全选选项答案

【问题标题】：How can I add select All option in jqueryMobile 1.4.2 custom select如何在 jqueryMobile 1.4.2 自定义选择中添加全选选项
【发布时间】：2014-09-23 13:48:32
【问题描述】：

我正在使用 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>

我想添加选择所有选项的全选选项。此外，当取消选择任何其他选项时，它应该显示切换行为。但是，当我在全选框上添加任何事件时，它不会调用它，因为 jquery 创建了一个包含所有选项的虚拟选择，并且事件不会转移到它。基本上，它应该像引导多选一样工作。 http://davidstutz.github.io/bootstrap-multiselect/ 我试图将它也与我的应用程序集成，但它不起作用。请提出任何其他替代方案。

【问题讨论】：

标签： jquery jquery-mobile select-menu jquery-multiselect

【解决方案1】：

jQM 小部件中没有提供此功能，但您可以使用一些额外的脚本来实现此功能。

给定选择标记：

<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>

jQM弹出的菜单列表被分配了一个选择id+“-menu”的id。所以我们可以处理菜单按钮的点击事件，看看是否点击了全选：

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-menu”的选择菜单中的任何锚点的点击。然后我们检查包含锚点的 LI 上名为 option-index 的数据属性。选项0为隐藏占位符，1为全选选项，其余为2、3、4等

所以如果点击 1，我们看看它是被选中还是未选中。如果正在检查，则迭代其余选项，如果尚未检查，则在它们上触发 click 事件。

如果单击任何其他选项，我们取消选中全选选项。

这是一个有效的DEMO

【讨论】：

超级！！非常感谢！！效果绝对好！！