比较多个动态生成的下拉列表的选定值
本文关键字：下拉列表 动态 比较 | 更新日期: 2023-09-27 18:35:22
我在单击按钮时动态生成多个下拉列表，具有相同的货币值。现在我必须比较一下，所有下拉列表都不应该具有重复值。例如。在按钮单击时，我生成了一个
下拉列表1， 下拉列表2， 下拉列表3
和
下拉列表4
并且都有相同的值，比方说
1，2，3，4，5
现在，如果我在任何列表中选择了 2，则不应允许此值从任何剩余列表中进行选择。
因为，我正在动态生成列表，所以我也没有多个 ID。我从我的角度尝试，但我只能比较两个列表和静态 id 的选定值。谢谢。
$("#currenciesList2").change(function() {
if ($(this).val() === $("#currenciesList1").val()) {
alert('Duplicate currency value');
$(this).val('');
}
});
另一种选择是为下拉菜单生成 Id，如下所示：
请注意，Choose...不会消失，因为它没有分配值
$(document).ready(function(){
var count = 1; //number of select
var c; //string var of count, not neccessary but better
var used = new Array;
$("#gen").on("click", function(){
c = count.toString(); //Not neccessary but better
$("#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>");
count++; //count + 1
});
$("#container").change(function(){
$("option").each(function(){//For each option
$(this).show(); //show all options
});
for (i=1; i<count; i++){
used[i-1] = $("#select"+i).val();//used options
for (j=1; j<used.length; j++){
for (p=0; p<used.length; p++){
if(j!==p){
if($("#select"+i).children('option[value="'+used[p]+'"]').length !== 0){//check children of selects for duplicate values
$("#select"+i).children('option[value="'+used[p]+'"]').hide()//hide duplicates
}
}
}
}
}
});
});<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>希望它有帮助！ :)
编辑：添加了价值过滤！ :)
我们正在做的是 我们正在获取当前下拉列表的选定值，然后我们检查其索引是否为 1，然后在其他下拉列表中删除该索引，同时假设所有其他下拉列表具有相同的值索引
$(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();
}
})
});
如果有更多的下拉列表，如 100 或更多，我们可以将类分配给下拉列表，然后我们可以使用 Foreach 循环遍历所有下拉列表并执行相同的查找函数来删除所选值，如下所示
//In Case of Have More DropDowns
var select = $("#drop_down_list1").val();
$(".AllDropDowns").each(function() {
$(this).find("option[value='" + select + "']").remove();
});
您可以为它们分配一个已知的类名，然后在 JQuery 中选择具有该类的所有 SELECT 元素，并获取每个元素的选定选项值。
您可能应该避免删除这些选项，除非您还打算添加一种机制，以便在更改原始选择后重新添加值。更好的方法可能是允许重复的选择，但对其进行测试，并在选择重复项时避免提交表单。这应该会让你开始走这条路：
function test() {
var usedVals = [];
$('#errorMsg').hide();
$('.avoidDupeSel').each(function() {
if (-1 !== $.inArray($(this).val(), usedVals)) {
$('#errorMsg').html('Duplicated values selected');
$('#errorMsg').show();
}
usedVals[i++] = $(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>我不久前做了类似的事情，但它都在 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;
}
在您需要创建下拉对象并将 ref 附加到目标之后
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;
}
使用类而不是 id，无论您有多少下拉菜单及其 id，您都可以动态执行此操作：
<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/