使用jQuery验证dom [英] validate the dom using jquery

问题描述

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

I am trying to validate the DONM using jquery Please look into the fiddle.

我的目标不是选择同一房间号的同一国家/地区.

My objective is not to select the same country to same room number .

我有两个脚本

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

scenario 1 (before saving into DB)

该示例运行正常

场景2(将数据保存到db之后)

scenario 2 (After saving the data into db )

来自数据库的已保存数据

saved data coming from 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标签.

First of all, you're creating n label tags with the id lbl2.

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

This is happening, because you're developing with ASP.NET and you didn't create your label with the runat=server attribute, so it won't generate different label IDs for each label created.

第二，您的代码太丑陋/冗长，因此我决定制作一个完整的新代码来实现您想要的功能，下面是该代码段的完整注释:

Second, your code was too ugly / verbose, so I decided to make a complete new code to achieve what you want, and the snippet is below, full commented:

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

Since the OP asked, I've created a fiddle for him: http://jsfiddle.net/h1b6e8zm/

这篇关于使用jQuery验证dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！