如何在jqueryMobile 1.4.2自定义选择中添加全选选项 [英] How can I add select All option in jqueryMobile 1.4.2 custom select

问题描述

我正在使用jqueryMobille版本1.4.2 我有一个星期几选择下拉列表

I am using jqueryMobille version 1.4.2 I have a select dropdown with the days of week

    <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/ 我尝试将其也与我的应用程序集成在一起，但是它不起作用. 请提出其他建议.

I want to add the select All option that selects all the option on its selection.Also it should display the toggle behavior when any other option is de-selected. However , when I add any event on the select All box it doesn't call it as jquery creates a dummy select with all options and the events are not tranferred to it. Basically, it should work like bootstrap multiselect. http://davidstutz.github.io/bootstrap-multiselect/ I tried to integrate that also with my application but it does not work. Please suggest any other alternatives.

推荐答案

jQM小部件中未提供此功能，但是您可以通过一些额外的脚本来实现此功能.

This is not provided in the jQM widget, but with a little extra script you can achieve this functionality.

给出选择标记:

<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事件，并查看是否单击了全选:

The menu list that jQM pops up is assigned an id of the select id + "-menu". So we can handle the click event of the menu buttons and see if select all was clicked:

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，依此类推.

We use event delegation to handle clicks on any anchor within the select menu called "selectDays-menu". Then we check the data attribute called option-index on the LI that contains the anchor. Option 0 is the hidden placeholder, 1 is the select all option, the rest are 2,3,4, etc.

因此，如果单击1，我们将查看它是否处于选中状态.如果正在检查，请重复其余选项；如果尚未选中，请在其上触发click事件.

So if 1 is clicked, we see if it is being checked or unchecked. If it is being checked, iterate the rest of the options and if they are not already checked, fire the click event on them.

如果单击了其他任何选项，我们将取消选中全选"选项.

If any other option is clicked, we uncheck the select all option.

这是正在工作的 演示

Here is a working DEMO

这篇关于如何在jqueryMobile 1.4.2自定义选择中添加全选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！