how to preserve all select elements selected values in jquery

Question

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 selected in other select list then there should be an alert. and after alert the current select list which is clicked or changed should be restore to the previous value. for example we have 3 select boxes name as A1, A2, A3. Each one have same values for example 1,2,3,4. A1 selected value is 1, A2 selected value is 2 and A3 selected value is 3. Now if your want to change A1 value from 1 to 2 then there should be an alert like "Already selected". After this alert A1 list should be restored back to its original value which is 1. I tried the following code. In this code I can get already existing alert but the value of the last changes select box is changed to new one.

    
    $(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;
       }
       
       
       $(".brand-list").change(function(){
       	a[$(this).attr('id')] = $('#'+ $(this).attr('id') + " option:selected").val();
        
        var current_selected_obj_id = $(this).attr('id');
        var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();   
        
        $(".brand-list").each(function(i, obj){
          var current_obj_id = $(this).attr('id');
          var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
          if(current_obj_id != current_selected_obj_id){
             if(current_selected_obj_value == current_obj_value){
               
                alert("current element global value: "+ a[current_selected_obj_id]);
             
             		$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')
             
               alert("already selected");
             }
          }else{
             a[current_obj_id] = current_obj_value;
          }
          
       });
        
       });
       
       
       $( ".brand-list" ).focus(function() {
       
       		var current_selected_obj_id = $(this).attr('id');
        	var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();   
      		a[current_selected_obj_id] = current_selected_obj_value;
          console.log(a[current_selected_obj_id]);
    		}); 
    });

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

Hopefully you can understand my question, because I'm not get to ask question which community members can understand easily. Thanks

Answer 1

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>

Answer 2

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>

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