使用jquery選擇級聯下拉驗證

我有HTML表格，基於父級值的級聯下拉，我需要在級聯下拉列表中進行一些驗證我該如何實現該功能？使用jquery選擇級聯下拉驗證

HTML代碼：

<html> 
    <head> 
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 
    <script> 
     $(function() { 
      $(".tr_weekly").hide(); 
      $(".tr_monthly").hide(); 
     }); 

     function schedule(value){ 
     if(value == 2){ 
      $(".tr_weekly").show(); 
      $(".tr_monthly").hide(); 
      return false; 
     }else if(value == 3){ 
      $(".tr_weekly").hide(); 
      $(".tr_monthly").show(); 
      return false; 
     }else{ 
      $(".tr_weekly").hide(); 
      $(".tr_monthly").hide(); 
      return false; 
     } 
    } 

    function validation(){ 
     if($(".weekly").exists()){ 
      var weekly_schedular= $("#weekly option:selected").text(); 
      alert("Weekly Dropdown enable with value "+weekly_schedular); 
     } 
     if($(".monthly").exists()){ 
      var monthly_schedular= $("#monthly option:selected").text(); 
      alert("Monthly Dropdown enable with value "+monthly_schedular); 
     } 
    } 
    </script> 
    </head> 
    <body> 
     <form id="form1" name="form1" method="post" onsubmit="return validation()" > 
    <table> 
      <tr> 
       <td>Schdule By </td> 
       <td> 
        <select id="duration" class="selectionBox" onchange="schedule(this.value);" name="duration"> 
         <option value="">select</option> 
         <option value="1">Daily</option> 
         <option value="2">Weekly</option> 
         <option value="3">Monthly</option> 
        </select> 
       </td> 
      </tr> 
      <tr class='tr_weekly'> 
      <td>Weekly</td> 
      <td> 
        <select id="weekly" name="day" class ='weekly'> 
         <option value="">select</option> 
         <option value="1">Monday</option> 
         <option value="2">Tuesday</option> 
         <option value="3">Wednesday</option> 
         <option value="4">Thursday</option> 
         <option value="5">Friday</option> 
         <option value="6">Saturday</option> 
         <option value="7">Sunday</option> 
        </select> 
       </td> 
      </tr> 
      <tr class='tr_monthly'> 
      <td>Monthly</td> 
      <td> 
        <select id="monthly" name="day" class ='monthly'> 
         <option value="">select</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10</option> 
         <option value="11">11</option> 
         <option value="12">12</option> 
         <option value="13">13</option> 
         <option value="14">14</option> 
         <option value="15">15</option> 
         <option value="16">16</option> 
         <option value="17">17</option> 
         <option value="18">18</option> 
         <option value="19">19</option> 
         <option value="20">20</option> 
         <option value="21">21</option> 
         <option value="22">22</option> 
         <option value="23">23</option> 
         <option value="24">24</option> 
         <option value="25">25</option> 
         <option value="26">26</option> 
         <option value="27">27</option> 
         <option value="28">28</option> 
        </select> 
       </td> 
      </tr> 
    </table> 
    </form> 
    </body> 
    </html>

基於時間表下拉菜單中值的另一種選擇下拉（每週/每月）隱藏/顯示它的工作，但我的問題是，像下面

問：

如果級聯下拉（每月/每週）顯示比只需要執行驗證的下拉菜單，如必須選擇任何值

來源

2015-06-26 Ankit Doshi

嘗試下面的代碼。 Fiddle

$(document).ready(function() { 
    $(".tr_weekly").hide(); 
    $(".tr_monthly").hide(); 

    $('#duration').change(function() { 
     var value = $('#duration').val(); 
     if (value == 2) { 
      $(".tr_weekly").show(); 
      $(".tr_monthly").hide(); 
      return false; 
     } else if (value == 3) { 
      $(".tr_weekly").hide(); 
      $(".tr_monthly").show(); 
      return false; 
     } else { 
      $(".tr_weekly").hide(); 
      $(".tr_monthly").hide(); 
     } 
    }); 
});

更新：對於表單驗證驗證，當你點擊提交按鈕。

$('#submit').click(function(){ 
    var value = $('#duration').val(); 
    var month = $('#monthly').val(); 

    if(value == 3 && month == ""){ 
     alert("Please select Monthly value"); 
    } 

});

來源

2015-06-26 08:19:21 Yasitha

它已經工作的功能，我只是想知道我是否會提出我的表格。然後我想驗證一樣，如果每月從下拉列表中選擇不是必須選擇日期否則需要停止提交表格 –

請根據您的意見查看更新。讓我知道是否需要更多更改。 – Yasitha

試試這個：

function validation(){ 
    if($(".tr_weekly").is(':visible')){ 
     var weekly_schedular= $("#weekly option:selected").text(); 
     alert("Weekly Dropdown enable with value "+weekly_schedular); 
     if (weekly_schedular == "select") { 
      return false; //if false not working, try event.preventDefault(); 
     } 
    } 
    if($(".tr_monthly").is(':visible')){ 
     var monthly_schedular= $("#monthly option:selected").text(); 
     alert("Monthly Dropdown enable with value "+monthly_schedular); 
     if (monthly_schedular == "select") { 
      return false; 
     } 
    } 
    retutn true; 
}

來源

2015-06-26 08:41:42

使用jquery選擇級聯下拉驗證

回答

相關問題