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/

而不是$(".option").click(function(){使用$(".option").change(function(){
如果其他逻辑对我来说也不合适。

Jquery表单下拉列表不起作用

1 个答案: