validate the dom using jquery

Question

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 .

I have two scenarions

scenario 1 (before saving into DB)

The example is working fine

scenario 2 (After saving the data into db )

saved data coming from DB

  Available Country RooNumber   SelectedPerson
    droipdown1            1      
     dropdown2             2         chennai

WRONG SELECTION

Available Country   RooNumber   SelectedPerson
        chennai       1           chennai
        chennai        2          chennai

JSFiddle:

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

code:

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

Answer 1

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

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> 

Update

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