jQuery 多个 Select - Select/deselect 项 "ALL"

Question

我的 jQuery 经验非常有限，在使用 selecting/deselecting 选项时遇到了问题。

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

当用户 select 任何其他选项时，我需要取消 select "ALL" 以仅具有 selected 选项 "selected"。相反，如果用户 selects "ALL"，我需要确保只有 "ALL" 被 selected 并且被 selected 的汽车被 deselected.

以下是我的汽车清单（为了示例目的而缩小）；

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

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

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

jQuery 多个 Select - Select/deselect 项 "ALL"

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

jquery

multi-select