我動態生成多個下拉列表按鈕點擊，具有相同的貨幣值。現在我必須比較下拉列表中沒有一個應該具有重複值。例如。在按鈕點擊我產生比較多個動態生成的下拉列表的選定值
Dropdownlist1，Dropwdownlist2，Dropwdownlist3
和
Dropdownlist4
，並都具有相同的價值觀，讓我們說
1,2， 3,4,5
現在，如果我在任何列表中選擇了，則不應允許從任何其餘列表中選擇此值。
因爲，我動態生成列表，所以我也沒有多個ID。我嘗試從我的最後，但我可以比較選定的值只有兩個列表和靜態ID。謝謝。
$("#currenciesList2").change(function() {
if ($(this).val() === $("#currenciesList1").val()) {
alert('Duplicate currency value');
$(this).val('');
}
});
另一種選擇是生成的Id爲dropdownmenu的是這樣的：
注意Choose...不dissappear爲它沒有賦值
$(document).ready(function(){
var count = 1; //number of select
var c; //string var of count, not neccessary but better
var used = new Array;
\t $("#gen").on("click", function(){
\t \t c = count.toString(); //Not neccessary but better
\t \t $("#container").append("<select id='select"+c+"' class='selector'><option>Choose...</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option></select>");
\t \t count++; //count + 1
});
$("#container").change(function(){
\t $("option").each(function(){//For each option
\t $(this).show(); //show all options
});
\t \t \t for (i=1; i<count; i++){
\t \t used[i-1] = $("#select"+i).val();//used options
for (j=1; j<used.length; j++){
for (p=0; p<used.length; p++){
\t if(j!==p){
\t if($("#select"+i).children('option[value="'+used[p]+'"]').length !== 0){//check children of selects for duplicate values
\t $("#select"+i).children('option[value="'+used[p]+'"]').hide()//hide duplicates
}
\t }
}
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button id="gen">
generate select
</button>希望它有幫助！ :)
編輯：增值過濾！ :)
您可以爲它們指定一個已知的類名，然後在JQuery中選擇所有具有該類的SELECT元素，並獲取每個選定的選項值。
您應該避免刪除選項，除非您還要添加一種機制以在原始選擇更改後重新添加值。更好的方法可能是允許重複的選擇，但測試它，並避免提交表單，如果重複選擇。
function test() {
var usedVals = [];
$('#errorMsg').hide();
$('.avoidDupeSel').each(function() {
if (-1 !== $.inArray($(this).val(), usedVals)) {
$('#errorMsg').html('Duplicated values selected');
$('#errorMsg').show();
\t }
\t usedVals[i++] \t = $(this).val();
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="randomId123" class="avoidDupeSel">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="randomId456" class="avoidDupeSel">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="randomId789" class="avoidDupeSel">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" onclick="test()" value="Submit" />
<span id="errorMsg"></span>我試圖運行此代碼，但它不顯示任何消息或警報的情況下重複值。 – user1547554
我們正在做的是我們正在當前的下拉列表中選擇的值，然後我們檢查，如果它的指數是1，則刪除該索引：這應該讓你沿着這條道路開始其他dropdownlists還假定其他所有下拉列表中有值
$(function() {
$("#drop_down_list1").change(function(){
var select = $("#drop_down_list1").val();
if (select!='') {
$("#drop_down_list2").find("option[value='" + selected + "']").remove();
$("#drop_down_list3").find("option[value='" + selected + "']").remove();
}
})
});
相同指數在具有多個DROPDOWNLIST像100或更多，我們可以分配類下拉列表中的案例，然後我們可以使用Forea CH遍歷所有下拉框，做同樣的查找功能來刪除選定的數值如下圖所示
//In Case of Have More DropDowns
var select = $("#drop_down_list1").val();
$(".AllDropDowns").each(function() {
$(this).find("option[value='" + select + "']").remove();
});
是的，所有下拉列表的值都有相同的索引。你能告訴我，我怎樣才能使它與動態生成的Ids更通用，因爲用戶最多可以生成100個這樣的列表。謝謝。 – user1547554
@ user1547554如果您有更多的下拉列表，則使用class而不是id。我更新了代碼 –
@ user1547554我更新了代碼，如果我們有多個下拉菜單，請使用foreach嘗試一下，希望它能正常工作 –
我前一陣子做了類似的財產以後，但其所有的JS我怕，你將需要與類的div將其固定到
var ListItem = [1,2,3,4,5];
var ListItemSelected = [];
var Dropdown = (function()
{
var Class = function (div)
{
this.div = $(div);
this.dropdown = $("<select></select>");
this.div.append(this.dropdown);
this.val = null;
this.target = null;
this.PopulatedDropdown = populatedDropDown();
populatedDropDown.call(this);
addEvent.call(this);
}
function addEvent()
{
var me = this;
me.dropdown.change(function()
{
me.val = me.dropdown.val();
ListItemSelected[ListItemSelected.length] = me.dropdown.val();
if(this.target != null)
{
for(var i = 0; i < this.target.length; i++
{
if(this.target[i] != this)this.target[i].PopulatedDropdown();
}
}
}
}
function populatedDropdown()
{
for(var i = 0; i < ListItem.length; i++)
{
var isUsed = false;
var firstItem = null;
for(var j = 0; j < ListItemSelected.length; j++)
{
if(ListItem[i] == ListItemSelected[j] && ListItem[i] != this.val)
{
isUsed = true;
break;
}
}
if(!isUsed)
{
var option = $("<option></option");
option.value = ListItem[i];
option.text(ListItem[i]);
this.dropdown.append(option);
if(firstItem == null) firstItem = ListItem[i];
}
}
if(this.val !=null) this.dropdown.val(this.val);
else this.dropdown.val(firstItem);
}
(Class.prototype);
return Class;
}
後，你需要創建下拉列表對象並附裁判針對
var div = document.getElementsByClassName(".dropdownClass");
var dropdown = [];
for(var i = 0; i < div.length; i++)
{
dropdown[i] = new Dropdown(div[i]);
}
for(var i = 0; i < dropdown.length; i++)
{
dropdown[i].target = dropdown;
}
使用類，而不是IDS，你可以動態地做到這一點無論多少下拉式選單，你必須和他們的IDS：
<select class="drop_down_list">
<option class=" requiresCVV2" value="">Choose...</option>
<option id="CCType_DISCOVER" class=" requiresCVV2" value="DISCOVER">Discover</option>
<option id="CCType_MC" class=" requiresCVV2" value="MC">Mastercard</option>
<option id="CCType_VISA" class=" requiresCVV2" value="VISA">Visa</option>
</select>
<select class="drop_down_list">
<option value="">Choose...</option>
<option id="CCType_DISCOVER" value="DISCOVER">Discover</option>
<option id="CCType_MC" class=" requiresCVV2" value="MC">Mastercard</option>
<option id="CCType_VISA" value="VISA">Visa</option>
</select>
<select class="drop_down_list">
<option value="">Choose...</option>
<option id="CCType_DISCOVER" value="DISCOVER">Discover</option>
<option id="CCType_MC" value="MC">Mastercard</option>
<option id="CCType_VISA" value="VISA">Visa</option>
</select>
這將解決你的問題，但你需要一些復位機構恢復值，並重新開始選擇的情況下是錯誤的。
function dropDowns() {
$(".drop_down_list").change(function(){
//Hide the option selected in all the others dropdowns
$(this).siblings("").children().filter("option[value='" +$('option:selected',this).val()+"']").hide();
});
}
你可以在這裏進行測試，看看它是否是你想要的： https://jsfiddle.net/z3tc2jbq/
如果我是正確的，你必須給他們單獨的ID。你可以做的只是生成ID使用創建的下拉數的計數。 PS。如果你可以添加小提琴，那麼我可以告訴你我的意思 – Evochrome
使用$（this）.val（）獲取所選下拉列表的選定值，然後從其他下拉列表中使用$（「選項[值= ' 「+ $（本）.VAL（）+」']「）除去（）; 讓我看，如果它看起來好，那麼我會給出完整的代碼 –
@HeemanshuBhalla是的，這種方法也看起來不錯，請提供代碼。謝謝。 – user1547554