Выпадающее окно формы JQuery не работает

Question

У меня большая борьба с получением этого кода jquery для удаления определенных полей формы с учетом выбранной пользователем опции. Он уменьшает только последний параметр (4), а остальные опускаются, а затем мгновенно откатываются назад.

HTML-файлы, используемые НИЖЕ:

<h4>Lesson Form</h4> 
<form action="mailer.php" data-validate="parsley" method="post" > 
    <p><strong>Full Name<span class="red">*</span></strong></p> 
    <input name="cf_name" data-required="true" class="send" type="text" /> 
    <p><strong>Email Address<span class="red">*</span></strong></p> 
    <input name="cf_email" data-required="true" data-type="email" class="send" type="text" /> 
    <p><strong>Cellphone No.<span class="red">*</span></strong></p> 
    <input name="cf_cell" data-required="true" class="send" type="text" /> 

    <p><strong>Instrument Type<span class="red">*</span></strong></p> 
    <select name="cf_instrument" size="1" class="option" > 
     <option value="Piano">Piano</option> 
     <option value="Vocals">Vocals</option> 
     <option value="Guitar">Guitar</option> 
     <option value="Bass">Bass</option> 
     <option value="Flute">Flute</option></select> 

    <p><strong>Lesson Type<span class="red">*</span></strong></p> 
    <select name="cf_package_type" size="1" class="option"> 
     <option value="Beginner Lesson - R100">Beginner Lesson - R100</option> 
     <option value="Advanced Lesson - R130">Advanced Lesson - R130</option> 
     <option value="Professional Lesson - R160">Professional Lesson - R160</option></select> 

    <p><strong>No. of Lessons<span class="red">*</span></strong></p> 
    <select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'> 
     <option value="1" selected="selected">1</option> 
     <option name="2" value="2">2</option> 
     <option name="3" value="3">3</option> 
     <option name="4" value="4">4</option></select> 

    <script src="js/datepair.js"></script> 
    <p><strong>Lesson Date & Time<span class="red">*</span></strong></p> 
    <p class="datepair" data-language="javascript"> 
     <input type="text" name="cf_booking_date" class="date start" data-required="true" /> 
     <input type="text" name="cf_start_time" class="time start" data-required="true" /> to 
     <input type="text" name="cf_end_time" class="time end" data-required="true" /></p> 

    <script src="js/datepair.js"></script> 
    <p id="lesson-2" class="datepair" data-language="javascript"> 
     <input type="text" name="cf_booking_date" class="date start" data-required="true" /> 
     <input type="text" name="cf_start_time" class="time start" data-required="true" /> to 
     <input type="text" name="cf_end_time" class="time end" data-required="true" /></p> 

    <script src="js/datepair.js"></script> 
    <p id="lesson-3" class="datepair" data-language="javascript"> 
     <input type="text" name="cf_booking_date" class="date start" data-required="true" /> 
     <input type="text" name="cf_start_time" class="time start" data-required="true" /> to 
     <input type="text" name="cf_end_time" class="time end" data-required="true" /></p> 

    <script src="js/datepair.js"></script> 
    <p id="lesson-4" class="datepair" data-language="javascript"> 
     <input type="text" name="cf_booking_date" class="date start" data-required="true" /> 
     <input type="text" name="cf_start_time" class="time start" data-required="true" /> to 
     <input type="text" name="cf_end_time" class="time end" data-required="true" /></p> 

    <!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM --> 
    <input id="website" class="using" name="website" type="text" /> 
    <!-- END --> 
    <input name="Submit" class="submit" value="Book Now" type="submit" /></form>  

Jquery SCRIPT файлы, используемые НИЖЕ:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#lesson-2").css("display","none"); 
     $("#lesson-3").css("display","none"); 
     $("#lesson-4").css("display","none"); 
     $(".option").click(function(){ 
      if ($('option[name=2]:checked').val() == "2") { 
       $("#lesson-2").slideDown("fast"); 
      } else { 
       $("#lesson-2").slideUp("fast"); 
      } 
      if ($('option[name=3]:checked').val() == "3") { 
       $("#lesson-2").slideDown("fast"); 
       $("#lesson-3").slideDown("fast"); 
      } else { 
       $("#lesson-2").slideUp("fast"); 
       $("#lesson-3").slideUp("fast"); 
      } 
      if ($('option[name=4]:checked').val() == "4") { 
       $("#lesson-2").slideDown("fast"); 
       $("#lesson-3").slideDown("fast"); 
       $("#lesson-4").slideDown("fast"); 
      } else { 
       $("#lesson-2").slideUp("fast"); 
       $("#lesson-3").slideUp("fast"); 
       $("#lesson-4").slideUp("fast"); 
      } 
     }); 
    }); 
</script> 

Answer 1

Проверьте ниже скрипку. Логика была неправильно

http://jsfiddle.net/7V8Jd/1/

1. Вместо $(".option").click(function(){ использования $(".option").change(function(){
2. Если еще логика, кажется, не свойственно мне, как хорошо.