Geek Answers Handbook

Selected multiple selection - deselect "All" when selecting something else, and vice versa

I use Selected Multiple Choice with the "All" option.

Referring to this

Basically, I want the following:

  • If the user selects any option other than "Everything", I want "Everything" to not be automatically selected - it works using this:

    if ($('#customTextFilterSelect option[value="ALL"]').attr('selected') == 'selected' && $("#customTextFilterSelect option:selected").length > 1) { $('#customTextFilterSelect option[value="ALL"]').removeAttr("selected"); }

  • I also want the job to be the opposite - if the user selects "All", I want other options to not be automatically selected. not sure how best to implement

  • And finally, if the user selects everything (manually by pressing "x"), "All" is automatically selected. kind of work , but the placeholder returns when "Everything" is selected as if length == 0

     if ($("#customTextFilterSelect option:selected").length == 0) { $('#customTextFilterSelect option[value="ALL"]').attr('selected', 'selected'); }
+4
source share
2 answers

Here is the solution:

 $(function() { var cSelect = $('.chzn-select').chosen(); var allItem = cSelect.find("option[value='ALL']"); //reference to the "ALL" option var rest = cSelect.find("option[value!='ALL']"); //reference for the rest of the options var allItemAlreadySelected = true; //set a flag for the "ALL" option previous state cSelect.change(function(event) { if ($(this).find("option:selected").length == 0) //if no selection { allItem.prop('selected', true); //select "ALL" option } else { if (allItem.is(':selected')) //currently "ALL" option is selected, but: { if (allItemAlreadySelected == false) //if previously not selected { rest.prop('selected', false); //deselect rest allItem.prop('selected', true); //select "ALL" option } else //if "ALL" option is previously selected (already), it means we have selected smthelse allItem.prop('selected', false); //so deselect "ALL" option } } allItemAlreadySelected = allItem.is(':selected'); //update the flag $('.chzn-select').trigger("liszt:updated"); //update the control }); });

Now you don’t need the placeholder at all. now management never becomes empty. So, to get rid of the placeholder, all you have to do; add this attribute to your select .

 data-placeholder=" "

The value must have a space , otherwise the selection may overwrite it.

 <select data-placeholder=" " id="customTextFilterSelect" multiple='multiple' style="width:350px;" class="chzn-select">

Here is the working code on jsFiddle .

+2
source

To do this, use the following javascript.

 $(function () { //Defining the 'ALL' as default option. var prevdata = ["ALL"]; $('.chzn-select').chosen().change(function(e) { if ($(this).find("option:selected").length === 0) { $(this).find("option[value='ALL']").attr('selected', 'selected'); } else { var cur_date = $(this).val(); if ($(this).find("option[value='ALL']").attr("selected") == "selected" && $(this).find("option:selected").length > 1) $(this).find("option[value='ALL']").removeAttr("selected"); if(( $.inArray('ALL', prevdata) == -1) && $.inArray('ALL', cur_date) > -1){ $(this).find('option').removeAttr('selected'); $(this).find("option[value='ALL']").attr("selected", "selected"); } } $('.chzn-select').trigger("liszt:updated"); //Storing the current processed value prevdata = $('#customTextFilterSelect').val(); }); });

Below is the jsFiddle link

http://jsfiddle.net/qCzK9/7/

+2
source

More articles:


All Articles