使用javascript检查html表格中每一行的下拉值

Question

我需要检查下拉列表的值是否等于在html表格的每一行中选择。 当我提交的值，它会显示错误消息，如果下拉选择的值为null或没有选择在特定的下拉列的HTML表的任何一行。 这里是我的代码，我尝试，但它不检查所有的行。

<script type="text/javascript"> 
    $(function DropDownvalidate() { 

     $("#btnSubmit").click(function() { 

      $('#table tr').each(function() { 
       if ($('#ddlDates').val() == "Select") { 
       alert("Please select an option!"); 
       return false; 
      } 
      return true; 
     }); 
     }); 
    }); 


</script> 

Answer 1

我认为这个问题可能是你在一个错误的地点应该是.each()功能之外添加返回真实的陈述。此外，您只需在表格行内搜索select input的id。因此请使用find()函数来查找当前行中的选择输入。

$(function() { 
 
      $("#btnSubmit").click(function() { 
 
       
 
       $('#table tr').each(function() { 
 
        if ($(this).find('#ddlDates').val() == "Select") { 
 
         alert("Please select an option!"); 
 
         
 
         return false; 
 
        } 
 
       }); 
 
       return true; 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="table"> 
 
<th>Select options</th> 
 
<tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr> 
 
    <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr> 
 
    <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr> 
 
    <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr> 
 
</table> 
 
<button id="btnSubmit">Submit</button>