使用jqueryvalidationdom

我正在尝试使用jqueryvalidationDONM请查看小提琴。

我的目标不是选择相同的房间号码。

我有两个场景

方案1（保存到DB之前）

这个例子很好用

方案2（将数据保存到db后）

保存的数据来自DB

Available Country RooNumber SelectedPerson droipdown1 1 dropdown2 2 chennai 

错误的选择

 Available Country RooNumber SelectedPerson chennai 1 chennai chennai 2 chennai 

的jsfiddle：

http://jsfiddle.net/bharatgillala/9o1gxa1h/10/

码：

  
   maxico  chennai newdelhi hongkong  
  2 
 
 
 
Available Country
 
RooNumber
 
Selected
 
 
1
 
  maxico  
 
 
 
    maxico chennai newdelhi hongkong 
 

 chennai 
 
 
 

Answer 1

首先，您要创建id为lbl2 n个 label标签。

这种情况正在发生，因为您使用ASP.NET进行开发并且未使用runat=server属性创建标签，因此它不会为每个创建的标签生成不同的标签ID。

其次，你的代码太丑陋/冗长，所以我决定制作一个完整的新代码来实现你想要的，下面的代码片段，完整评论：

 (function(d) { // when all the DOMElements are already loaded into the document d.addEventListener('DOMContentLoaded', function() { // gets the generated table, and get all the dropdownlists inside it var table = document.getElementById('gridviewInfo'), ddls = [].slice.call(table.querySelectorAll('select')); // loop through the dropdownlists ddls.forEach(function(ddl, i) { // get the label inside the last td var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild; // initially, we want to change the dropdownlist selectedvalue to the label text ddl.value = lbl.textContent.trim(); // then, we must disable this option in all the other dropdownlists updateDisabled(ddl); // so, we add a change event handler ddl.addEventListener('change', function(e) { // when the ddl value is changed, we update the label text lbl.textContent = ddl.value; // and we disable the option selected in all the other dropdownlists updateDisabled(ddl); }); }); function updateDisabled(ddl) { // to disable all the other dropdownlists // we loop through all the HTMLOptionElements inside the table [].forEach.call(table.querySelectorAll('option'), function (opt, j) { // we look if the current option inside the loop is not the selected one if (opt.parentNode !== ddl) { // then, if the option has the same selected value, we disable it, else we enable opt.disabled = opt.value && opt.value === ddl.value; } }); } }); })(document); 

 #gridviewInfo td:nth-child(1) { white-space: nowrap; text-align: left; } 

 
 
 
 
Available Person
 
RooNumber
 
SelectedPerson
 
 
 
 
 
   maxico chennai newdelhi hongkong  
 
1
 
 maxico 
 
 
 
   maxico chennai newdelhi hongkong  
 
2
 
 hongkong