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()関数の外でなければなりません間違った場所に返却真のステートメントを追加していることかもしれないと思います。また、idのselect inputを表の行の中だけで検索する必要があります。したがって、関数を使用して、現在の行内の選択入力を検索します。

$(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>