jQuery Multiple Select - 使用“ALL”选择/取消选择项目答案

【问题标题】：jQuery Multiple Select - Select/deselect items with "ALL"jQuery Multiple Select - 使用“ALL”选择/取消选择项目
【发布时间】：2018-11-24 07:48:05
【问题描述】：

我的 jQuery 经验非常有限，并且在选择/取消选择选项时遇到了麻烦。

我有一个多选的汽车列表，默认选项是全部。

当用户选择任何其他选项时，我需要取消选择“全部”以仅将所选选项“选中”。相反，如果用户选择“全部”，我需要确保只选择“全部”并且取消选择已选择的汽车。

以下是我的汽车清单（出于示例目的而减少）；

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

非常感谢任何帮助。

【问题讨论】：

标签： jquery multi-select

【解决方案1】：

可能是这样的：

$('#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>

【讨论】：

谢谢@mscdeveloper，但是，这不起作用，当我选择另一个选项时它不会取消选择全部，当我点击全部时它会选择它下面的所有内容

【解决方案2】：

请试试这个

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>

【讨论】：

【解决方案3】：

试试看：

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

【讨论】：