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 = newArray();
       		$(".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;
       }
	   
	   functionhasConflict(input){
		   var conflict = false;
		   $(".brand-list").not(input).each(function(i, obj){
			   if($(this).val()==input.val()){
				   conflict = true;
				   returnfalse; //break the loop
			   }
		   });
		   
		   return conflict;
	   }
       
       
       $(".brand-list").change(function(){
		   var $this = $(this); //recycle objectif(hasConflict($this)){
		       $this.val($this.data('prev'));
			   alert("Conflict"); //do whatever
		   }            
       });
       
       
       $( ".brand-list" ).on('click focus',function() {
           $(this).data('prev',$(this).val());
    	}); 
    });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><selectid="inputBrand-1"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1"selected="selected">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select><selectid="inputBrand-2"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1">1</option><optionvalue="2"selected="selected">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select><selectid="inputBrand-3"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3"selected="selected">3</option><optionvalue="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 valuesvar 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 instancevar $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();

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><selectid="inputBrand-1"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1"selected="selected">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select><selectid="inputBrand-2"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1">1</option><optionvalue="2"selected="selected">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select><selectid="inputBrand-3"class="brand-list"><optionvalue="-1">SELECT A BRAND</option><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3" >3</option><optionvalue="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')