使用jquery验证dom

validate the dom using jquery

本文关键字：dom 验证 jquery 使用      更新时间：2023-09-26

我正在尝试使用jquery验证DONM。

我的目标不是为相同的房间号选择相同的国家。

我有两个场景

场景1(保存到数据库之前)

示例运行正常

场景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/

代码:

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

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

首先，您要创建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;
}
<table id="gridviewInfo" runatr="server">
  <thead>
    <tr>
      <th>Available Person</th>
      <th>RooNumber</th>
      <th>SelectedPerson</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="judges" id="ddlAvailableJudges1" name=ctl00$contentBody$gvwRoomInformation$ctl02$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>1</td>
      <td>
        <label>maxico</label>
      </td>
    </tr>
    <tr>
      <td>
        <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>2</td>
      <td>
        <label>hongkong</label>
      </td>
    </tr>
  </tbody>
</table>

既然OP问了，我已经为他创建了一个小提琴:http://jsfiddle.net/h1b6e8zm/

相关文章：