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/
Post a Comment for "Validate The Dom Using Jquery"