Validate The Dom Using Jquery

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

Solution 1:

First of all, you're creating nlabel 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 itvar 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 tdvar 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 dropdownlistsupdateDisabled(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 dropdownlistsupdateDisabled(ddl);        
      });
    });
    
    functionupdateDisabled(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 oneif (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);

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

<tableid="gridviewInfo"runatr="server"><thead><tr><th>Available Person</th><th>RooNumber</th><th>SelectedPerson</th></tr></thead><tbody><tr><td><selectclass="judges"id="ddlAvailableJudges1"name=ctl00$contentBody$gvwRoomInformation$ctl02$ddlAvailableJudges><optionselectedvalue=''></option><optionvalue="maxico">maxico</option><optionvalue="chennai">chennai</option><optionvalue="newdelhi">newdelhi</option><optionvalue="hongkong">hongkong</option></select></td><td>1</td><td><label>maxico</label></td></tr><tr><td><selectclass="judges"id="ddlAvailableJudges2"name=ctl00$contentBody$gvwRoomInformation$ctl03$ddlAvailableJudges><optionselectedvalue=''></option><optionvalue="maxico">maxico</option><optionvalue="chennai">chennai</option><optionvalue="newdelhi">newdelhi</option><optionvalue="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/