javascript - 如何在jquery中保留所有选择元素的选定值

Question

你能帮我解决这个问题吗？问题是这样的。

我有多个具有相同类名但不同 ID 的选择列表。如果用户选择已在其他选择列表中选择的相同选项，则应该有警报。警报后，单击或更改的当前选择列表应恢复为之前的值。例如我们有 3 个选择框，名称为 A1、A2、A3。每个都有相同的值，例如 1、2、3、4。 A1 选择的值为 1，A2 选择的值为 2，A3 选择的值为 3。现在，如果您想将 A1 值从 1 更改为 2，那么应该会出现“已选择”之类的警报。在此警报之后，A1 列表应该恢复到其原始值，即 1。我尝试了以下代码。在此代码中，我可以获得已经存在的警报，但最后更改选择框的值已更改为新的值。

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

希望您能理解我的问题，因为我无法提出社区成员可以轻松理解的问题。谢谢

Answer 1

您可以保存之前的值然后检查

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