我动态生成多个下拉列表按钮点击，具有相同的货币值。现在我必须比较下拉列表中没有一个应该具有重复值。例如。在按钮点击我产生比较多个动态生成的下拉列表的选定值
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