0

我正在使用 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/ 我试图将它也与我的应用程序集成，但它不起作用。请提出任何其他替代方案。

4

1 回答 1

3

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 事件。

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

这是一个有效的演示

于 2014-09-24T13:50:56.483 回答