Проверьте и уберите мою функцию JQuery

Question

Я новичок в JQuery, но мне удалось заставить его работать так, как я хочу. Проблема в том, что это немного запутанно и может легко выйти из-под контроля, если я добавлю дополнительные параметры.

Я пытаюсь показать и скрыть divs на основе выпадающего списка пользователей. Я сделал 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>

Может кто-нибудь дать мне какие-либо указатели? Я хочу учиться! BTW, я использую 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>

Спасибо за вашу помощь!