How can I add select All option in jqueryMobile 1.4.2 custom select

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>

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.

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

Given the select markup:

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

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();
            }
        }
    }
});

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.

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