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选项，选择其选择的所有选项。当取消选择任何其他选项时，它还应显示切换行为。但是，当我在select All框中添加任何事件时，它不会调用它，因为jquery会创建一个包含所有选项的虚拟选择，并且事件不会传输给它。基本上，它应该像bootstrap multiselect一样工作。 http://davidstutz.github.io/bootstrap-multiselect/ 我试图将它与我的应用程序集成，但它不起作用。请建议任何其他替代方案。

Answer 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。因此，我们可以处理菜单按钮的click事件，看看是否单击了select all：

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

如何在jqueryMobile 1.4.2自定义选择中添加select all选项

1 个答案: