Question

我在按钮点击上动态生成多个下拉列表，并使用相同的货币值。现在我要比较一下，下拉列表中没有一个应该具有重复值。例如。点击按钮我生成了一个

Dropdownlist1，Dropwdownlist2，Dropwdownlist3

和

Dropdownlist4

并且都具有相同的值，比方说

1,2,3,4,5

现在，如果我在任何列表中选择 2 ，则不应允许此值从任何剩余列表中进行选择。

因为，我正在动态生成列表，所以我也没有多个ID。我试着从我的结尾但我可以只选择两个列表和静态ID的选定值。谢谢。

 $("#currenciesList2").change(function() {
        if ($(this).val() === $("#currenciesList1").val()) {
            alert('Duplicate currency value');
            $(this).val('');
        }
    });

Answer 1

您可以为它们分配所有已知的类名，然后在JQuery中选择该类的所有SELECT元素，并获取每个选定的选项值。

您应该避免删除这些选项，除非您还要添加一种机制，以便在更改原始选择后重新添加值。更好的方法可能是允许重复选择，但测试它并避免在选择重复项时提交表单。这应该让你开始沿着这条道路前进：

＆＃13;

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();
  });
}

＆＃13;

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

＆＃13;

Answer 2

我们正在做的是我们正在获取当前下拉列表的选定值然后我们检查其索引是否为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();

        });

Answer 3

前段时间我做过类似的事情，但是我觉得这一切都在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; 
}

Answer 4

使用类而不是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/

比较多个动态生成的下拉列表的选定值

4 个答案: