如何保留所有選擇元素在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

與其讓用戶選擇某些東西並被告知他們不能使用戶煩惱，不如禁用先前的選擇或將其完全刪除是更好的UX。

這是一種管理其他選擇的過濾/刪除的方法

 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

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

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

實際上，您當前正在手動設置每個選項元素上的所選屬性。 這不是一個好方法，因為它不會刪除同一select元素的選項的其他屬性。 因此，請在您的源代碼中使用以下代碼。

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

用上面的代碼替換下面的代碼

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