jQuery Multiple Select - Select/deselect items with "ALL"

Question

I have very limited jQuery experience and am having trouble with selecting/deselecting options.

I have a list of cars in a multi select with the default option being All.

When a user selects any other option, I need to deselect "ALL" to only have the selected option "selected". Conversly, if a user selects "ALL", I need to ensure only "ALL" is selected and the cars that were selected are deselected.

Below is my car list (reduced for example purposes);

<select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>

Any help is greatly appreciated.

Answer 1

Maybe like this:

$('#carsDropDown').change(function(){
	var this_val_arr=$(this).val();
	var found_all=false;
	for(var key in this_val_arr){
		if(this_val_arr[key]=='ALL'){
			found_all=true;
		}
	}
	if(found_all){
		$('#carsDropDown option').each(function(){
			if($(this).val()=='ALL'){
				$(this).removeProp('selected');
			}else{
				$(this).prop('selected','selected');
	        }
		});
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>

Answer 2

Please try this

var is_all_selected_state = true; //Initially 'ALL' has been selected
$('#carsDropDown').change(function(){
  var selected_values_array = $(this).val(); 
  var is_all_option_selected_now = false;
  if(selected_values_array.length >= ($('#carsDropDown option').length - 1))
  { //If all the option or except one option selceted then this case should be consider as 'ALL' option
    is_all_selected_state = false;
    is_all_option_selected_now = true;
  }
  else
  { // Get the ALL option selected state
    is_all_option_selected_now = $('#carsDropDown option[value=ALL]').prop('selected');
  }
  if(is_all_option_selected_now)
  { // If all selected
    if(selected_values_array.length > 1)
    { // Check whether more than one value selected along with ALL or not
      if(!is_all_selected_state)
      {
         // Currently selected option as 'ALL'. So remove the rest of the option selected attribute except 'ALL'
        $('#carsDropDown option[value!=ALL]').prop('selected',false);
        $('#carsDropDown option[value=ALL]').prop('selected', true);
        is_all_selected_state = true;
      }
      else
      { // Currently selected option as other than 'ALL'. Then remove the ALL option selected attribute
        $('#carsDropDown option[value=ALL]').prop('selected', false);
        is_all_selected_state = false;
      }
    }
    else
    {
      is_all_selected_state = true; //Only ALL option selected
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>

Answer 3

Try it:

$(document).on('change','#carsDropDown',function(){
       if($(this).val()=='ALL'){
        $("#carsDropDown :selected").prop('selected', false);
        $("#carsDropDown option").map(function()
        {
            ($(this).val()!='ALL') ? $(this).prop('selected',true) : 0;
        });
       }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <select id="carsDropDown" multiple="multiple">
    <option name="carCode" selected="selected" value="ALL">All Cars</option>
    <option value="AUD" name="carCode">Audi</option>  
    <option value="BMW" name="carCode">BMW</option>  
    <option value="FOR" name="carCode">Ford</option>
    <option value="SAB" name="carCode">Saab</option>
    <option value="VOL" name="carCode">Volvo</option>                                                        
</select>