使用javascript

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

我认为问题可能是您在错误的地方添加了返回true语句，它应该在.each()函数之外。此外，您只需要在表格行中搜索id select input。因此，使用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>