2015-06-26 3 views
0

У меня есть таблица 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> 

на основе значения Расписание ниспадающего Другой выберите выпадающий (Еженедельно/Ежемесячно) скрыть/показать свою работу, но мой вопрос, как показано ниже

Вопрос:

Если каскадные выпадающее меню (Ежемесячно/Еженедельно) показывает, чем и только нужно выполнить валидацию в этом выпадающем списке, как, например, необходимо будет выбрать любое значение

ответ

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

Обновление: Для проверки формы Validate при нажатии на кнопку отправки.

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

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

}); 
+0

Его уже работает Feature я просто хочу знать, если я представлю свою форму Тогда я хочу, чтобы проверить, как если ежемесячно, это выбрать из выпадающего списка, чем должны выбрать дату else необходимо прекратить отправку формы –

+0

Пожалуйста, просмотрите обновление в соответствии с вашими комментариями. Сообщите мне, нужны ли какие-либо изменения. – Yasitha

0

попробовать это:

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; 
} 
Смежные вопросы