jQuery技术:使用jqueryvalidationdom

 (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; } 

 
 
 
 
Available Person
 
RooNumber
 
SelectedPerson
 
 
 
 
 
   maxico chennai newdelhi hongkong  
 
1
 
 maxico 
 
 
 
   maxico chennai newdelhi hongkong  
 
2
 
 hongkong