Javascript 使用jquery验证dom

我正在尝试使用jquery验证DONM，请查看小提琴

我的目标不是选择同一个国家的同一个房间号码

我有两种场景

场景1保存到DB之前

这个例子很好用

场景2将数据保存到db后

来自数据库的已保存数据

  Available Country RooNumber   SelectedPerson
    droipdown1            1      
     dropdown2             2         chennai

错误选择

Available Country   RooNumber   SelectedPerson
        chennai       1           chennai
        chennai        2          chennai

JSFiddle：

代码：

二,

---

首先，您将创建n个id为lbl2的标签标签

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

第二，您的代码太难看/冗长，因此我决定编写一个完整的新代码来实现您想要的，代码片段如下，全文如下：

功能{ //当所有的数据元素都已加载到文档中时 d、 addEventListener'DOMContentLoaded'，函数{ //获取生成的表，并获取其中的所有DropDownList var table=document.getElementById'gridviewInfo'， ddls=[].slice.calltable.querySelectorAll'select'； //在下拉列表中循环 ddls.forEachfunctionddl，i{ //将标签放入最后一个td内 var lbl=ddl.parentNode.parentNode.lastElementChild.firstElementChild； //最初，我们希望将dropdownlist selectedvalue更改为标签文本 ddl.value=lbl.textContent.trim； //然后，我们必须在所有其他下拉列表中禁用此选项 UpdateDisableDDL； //因此，我们添加了一个变更事件处理程序 ddl.addEventListener'change'，函数E{ //当ddl值更改时，我们更新标签文本 lbl.textContent=ddl.value； //我们禁用所有其他下拉列表中选择的选项 UpdateDisableDDL； }; }; 函数updateDisableDDL{ //禁用所有其他下拉列表 //我们循环遍历表中的所有HtmlOption元素 [].forEach.calltable.queryselectoral'option'，函数opt，j{ //我们查看循环中的当前选项是否不是所选选项 如果opt.parentNode！==ddl{ //然后，如果选项具有相同的选定值，则禁用它，否则启用 opt.disabled=opt.value&&opt.value==ddl.value； } }; } }; }文件； gridviewInfo td:nth-child1{ 空白：nowrap； 文本对齐：左对齐； } 可用人员 鲁努伯 被选中的人 马克西科 钦奈 新德里 香港 1. 马克西科 马克西科 钦奈 新德里 香港 2. 香港

---

我不知道你在问什么。预期的输出是什么？验证dom太模糊了。请解释与html元素相关的问题。还要解释预期的行为。在防止下拉列表中重复选择值之后，客户端对您的数据库一无所知？Buzinas。您能将其放入JSFIDLE吗？我不想问这个问题，但既然您显然理解这个问题，您能更新标题和/或文本，使其对普通人有意义吗？

  <table id="gridviewInfo" runatr="server">


<TBODY><TR>
<TH scope=col>Available Country</TH>
<TH scope=col>RooNumber</TH>
<TH scope=col>Selected</TH>

</TR>

<OPTION selected value=>
</OPTION>
<OPTION  value=maxico>maxico
</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>
<TD style="WIDTH: 100px">1</TD>
<td>
<label id='lbl2'> maxico </label>
</td>    
</TR>

<TR>
<TD style="WHITE-SPACE: nowrap" align=left>

<SELECT class="judges" id='ddlAvailableJudges2' name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges> 

    <OPTION selected value=>
</OPTION>
    <OPTION  value=maxico>maxico</OPTION> <OPTION value=chennai>chennai</OPTION> <OPTION value=newdelhi>newdelhi</OPTION> <OPTION value=hongkong>hongkong</OPTION></SELECT> </TD>

<td>
<label id='lbl2'>chennai</label>
</td>
</tr>
</table>