检查并整理我的 JQuery 函数

Question

我是 JQuery 的新手，但已经设法让它按照我想要的方式工作。问题是，它有点复杂，如果我添加更多选项，它很容易失控。

我正在尝试根据用户下拉选择显示和隐藏 div。到目前为止，我已经制作了一个 JSFiddle，但我认为它可以进行一些简化。

$(function() {
    $("select").change(function() {

        if ($(this).val() == "I have a query") {
            $("#cf-query").show("slow") && $("#cf-booking").hide("slow")
        } else if ($(this).val() == "I would like to book") {
            $("#cf-booking").show("slow") && $("#cf-query").hide("slow")

        } else {
            $(".cf-section").hide("slow");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h2>What is the nature of your enquiry*:</h2>

<select id="cf-dd-nature">
    <option value="">--</option>
    <option value="I have a query">I have a query</option>
    <option value="I would like to book">I would like to Book</option>
</select>

<div class="cf-section" id="cf-query" style="display: none;">
    <h2>Query</h2>
    <p>First Name:</p>
    <p>Surname*:</p>
    <p>Email Address*:</p>
    <p>Telephone number*:</p>
</div>


<div class="cf-section" id="cf-booking" style="display: none;">
    <h2>Booking</h2>
    <p>First Name:</p>
    <p>Telephone number*:</p>
</div>

谁能给我指点一下吗？我愿意学习！顺便说一句，我正在使用 CF7 构建表单。

JSFiddle：http://jsfiddle.net/rchampniss/mdy7acwn/

Answer 1

我找到了解决办法！

    $(function() {
        $('#cf-dd-nature').change(function(){
            $('.cf-section').hide();
            $('#' + $(this).val()).show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><h2>What is the nature of your enquiry*:</h2>

<select id="cf-dd-nature">
    <option value="">--</option>
    <option value="cf-query">I have a query</option>
    <option value="cf-booking">I would like to Book</option>
</select>

<div class="cf-section" id="cf-query" style="display: none;">
    <h2>Query</h2>
    <p>First Name:</p>
    <p>Surname*:</p>
    <p>Email Address*:</p>
    <p>Telephone number*:</p>
</div>


<div class="cf-section" id="cf-booking" style="display: none;">
    <h2>Booking</h2>
    <p>First Name:</p>
    <p>Telephone number*:</p>
</div>

感谢您的帮助！

检查并整理我的 JQuery 函数

Check and tidy up my JQuery function

jquery

show-hide

contact-form-7

dropdown