HTML selectpicker multiple , options "all" disable all other options

Question

I have a select picker element like this in my web page :

<select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                          <option value="-1" selected >All</option>
                                            <option value="0" >Facile</option> 
                                            <option value="1" >Normal</option>
                                            <option value="2"  >Difficile</option>
                                         </select>

I want that when the user select the "All" options (value = '-1') , if there are other options selected they become not selected, and if the option all is selected when the user select an other options the "all option" become not selected.

I have searched for like 2 hours and i can't make this working.

I work with bootstrap and this select element is a selectpicker element, my javascript don't work when i try something ..

Please help !

EDIT :

I posted the working code as an answer, thanks for your help !

Are you sure you want the other options to be disabled? Wouldn't you just want to deselect "All" when any others are selected? — 4castle, May 22 '16 at 18:55
@CyrilIselin I have tried something like this : Something like this but my selectpicker didn't refresh at all : for (var i = 1; i < select.options.length; i++) { select.options[i].selected = false; } — Furtiro, May 22 '16 at 19:00
Possible duplicate of [Deselect all options in Multiple Select with 1 option](http://stackoverflow.com/questions/2580960/deselect-all-options-in-multiple-select-with-1-option) — Cyril Iselin, May 22 '16 at 19:06
@CyrilIselin No duplicate post, the answers of this post and many other post didn't solve my problem ! — Furtiro, May 22 '16 at 19:23

score 2 · Answer 1 · answered May 22 '16 at 19:08

2

Something like this?

        function ChangeFilters(){
            var selVal = $('#difficulty').val()[0];

            if(selVal == -1){
                $('#difficulty').attr('multiple',false);
            }else{
                $('#difficulty').attr('multiple',true);
            }
        }

answered May 22 '16 at 19:08

yuriy636

11,171
5
37
42

When all options are deselected, `val()` returns `null`. There needs to be a null check before `[0]` or else there's an error thrown. – 4castle May 22 '16 at 19:24
@4castle Good point, i update my post with the working function – Furtiro May 22 '16 at 19:28
@yuriy636 With this solution, the first click ( the first on change) don't update the values, i need to click twice to select other options, and only the first time after page load, any ideas ? – Furtiro May 22 '16 at 19:59
You mean if you select "All" even if it's selected after the page load? Tried other things and everything works well so far. – yuriy636 May 22 '16 at 20:06
@yuriy636 Updated my post to describe my problems – Furtiro May 22 '16 at 20:11

score 0 · Accepted Answer · edited May 23 '17 at 12:24

With the help of this post Select all / Unselect all in Bootstrap Select plugin

This is the full working code which allow the user to select the All option, 3 difficulties, or nothing :

HTML :

<select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                      <option value="All" selected >Tous</option>
                                        <option value="0" >Facile</option> 
                                        <option value="1" >Normal</option>
                                        <option value="2"  >Difficile</option>
                                     </select>

Javascript :

 //This need to be on your page load or other load event before the first onChange.
    $('#difficulty').data('allOptionIsSelected', true);

 function ChangeFilters() {

     if ($('#difficulty') != null) {
         if ($('#difficulty').val() != null) {


             var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
             function valuesOf(elements) {
                 return $.map(elements, function (element) {
                     return element.value;
                 });
             }

             if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
                 //User clicked 'All' option
                 if (allOptionIsSelected) {

                     $('#difficulty').selectpicker('val', ["All"]);
                     $('#difficulty').selectpicker('refresh');
                 } else {

                 }
             } else {
                 // User clicked other option

                 if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
                     //user clicked other
                     // All options were selected, user deselected one option
                     // => unselect 'All' option
                     $('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
                     allOptionIsSelected = false;
                 }
             }
             $('#difficulty').data('allOptionIsSelected', allOptionIsSelected);

         }

         $('#difficulty').selectpicker('refresh');
     }


 }

If you want to make this work with your project, change '#difficulty' to the id of your select control.

Thanks to @yuriy636 for the previous help :)

HTML selectpicker multiple , options "all" disable all other options

2 Answers2