Question

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

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

当用户选择任何其他选项时，我需要取消选择＆＃34; ALL＆＃34;只选择＆＃34;选择＆＃34;。相反，如果用户选择＆＃34; ALL＆＃34;，我只需要确保＆＃34; ALL＆＃34;选中并取消选择所选的车辆。

以下是我的车辆清单（为了示例目的而减少）;

<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

也许是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

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 Multiple Select - 使用＆＃34; ALL＆＃34;选择/取消选择项目

3 个答案: