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

Question

我需要检查下拉值不等于在 html 表的每一行中选择。 当我提交值时，如果下拉选择的值为空或未在特定下拉列的 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

我认为问题可能是您在错误的位置添加了 return true 语句，它应该在 .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>