Question

我有基于父值的级联下拉列表的HTML表格我需要在级联下拉列表中进行一些验证我该如何实现？

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>

基于计划下拉值另一个选择下拉列表（每周/每月）隐藏/显示其工作但我的问题如下所示

问题：

如果显示级联下拉列表（每月/每周）而不是仅需要在该下拉列表上执行验证，则必须选择任何值

Answer 1

尝试以下代码。 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");
    }

});

Answer 2

试试这个：

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;
 }

使用jquery选择Cascading下拉验证

2 个答案: