How To Preserve All Select Elements Selected Values In Jquery

Can you help me to solve this problem. The problem is this. I have multiple select lists with same class name but different ids. If user select same option which is already selecte

Solution 1:

You can save the previous value and check it then

    $(document).ready(function(){
       var init = true;
       
       if(init == true){
       		var a = new Array();
       		$(".brand-list").each(function(i, obj){
          	var current_obj_id = $(this).attr('id');
          	var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
          	a[current_obj_id] = current_obj_value;
       		});
          init = false;
       }
	   
	   function hasConflict(input){
		   var conflict = false;
		   $(".brand-list").not(input).each(function(i, obj){
			   if($(this).val()==input.val()){
				   conflict = true;
				   return false; //break the loop
			   }
		   });
		   
		   return conflict;
	   }
       
       
       $(".brand-list").change(function(){
		   var $this = $(this); //recycle object
		   if(hasConflict($this)){
		       $this.val($this.data('prev'));
			   alert("Conflict"); //do whatever
		   }            
       });
       
       
       $( ".brand-list" ).on('click focus',function() {
           $(this).data('prev',$(this).val());
    	}); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    
    </select>
    
    <select id="inputBrand-2" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    
    </select>
    
    <select id="inputBrand-3" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    </select>

Solution 2:

Rather than annoy user by letting them select something and be told they can't it's better UX to either disable previous selections or remove them completely.

Here's an approach that manages the filtering/removing of other selections

var $selects = $(".brand-list"),
  // store a cloned set of all options 
  $storedOptions = $selects.first().children().clone().removeAttr('selected'),
  // whether to always include "SELECT A BRAND"
  alwaysShowDefault = true; 

$selects.change(function() {

  // create array of all the selected values
  var allValues = $selects.map(function() {
    return $(this).val()
  }).get();
  
  // loop through each select to create filtered options
  $selects.each(function(i) {
    // new set of cloned and filtered options for this select instance
    var $opts =  $storedOptions.clone().filter(function() {     
      if(+this.value === -1){
         return alwaysShowDefault || +allValues[i] === -1;
      }    
      return allValues[i] === this.value || allValues.indexOf(this.value) === -1;
    });
    // update filtered options and reset current value
    $(this).html($opts).val(allValues[i])
  })


// trigger one change on page load to filter what is already selected
}).first().change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    
    </select>

<select id="inputBrand-2" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    
    </select>

<select id="inputBrand-3" class="brand-list">
    <option value="-1">SELECT A BRAND</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" >3</option>
    <option value="4">4</option>
    </select>

Solution 3:

Actually you'r currently doing is manually setting the selected attribute on each option element. It is not a good approach because it doesn't remove other attributes of options of the same select element. So use following code in your source.

$(e.currentTarget).val(-1);

Replace following code with above one

$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')