联系表格 7：选择 display/hide div

Question

我正在关注这个 post jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field) 根据选择创建 display/hide。

我刚刚创建了表单，但我如何实现 jquery 功能？我必须在联系表 7 页中创建 html、head、body 标签吗？因为我正在尝试但不起作用。

<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
    <option value="I want to say hello">I want to say hello</option>
</select>

<div id="I want to hire you" class="note">I am currently available</div>
<div id="I want to ask you a question" class="note">Feel free to ask</div>
<div id="I want to say hello" class="note">Get in touch</div>

jQuery

$('.note').hide();
$(document).on("change", "#reason", function() {
  $('.note').hide();
  var neededId = $(this).val();
  var divToShow = $(".note").filter("[id='" + neededId + "']");
  divToShow.show();
});

编辑：

<html>
<head>
<script>
$('.note').hide();

$(document).on("change", "#reason", function () {
$('.note').hide();
var neededId = $(this).val();
var divToShow = $(".note").filter("[id='" + neededId + "']");
divToShow.show();
});
</script>
<body>
<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
<option value="I want to say hello">I want to say hello</option>
</select>

<div style="display: none;" id="I want to hire you" class="note">I am currently available</div>
<div style="display: none;" id="I want to ask you a question" class="note">Feel free to ask</div>
<div style="display: none;" id="I want to say hello" class="note">Get in touch</div>
</body>
</html>

Answer 1

你忘记的事情是：

To add jquery.js file reference

To wrap code in document.ready and also to mention type of script

对您的 html

进行以下更改

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>"></script>
      //reference to js file from cdn
      <script type="text/javascript">
         $(document).ready(function(){
             //execute code when document is ready
             $('.note').hide();
             $(document).on("change", "#reason", function () {
                 $('.note').hide();
                 var neededId = $(this).val();
                 var divToShow = $(".note").filter("[id='" + neededId + "']");
                 divToShow.show();
             });
        });
      </script>
   <body>
      <select id="reason">
         <option>...</option>
         <option value="I want to hire you">I want to hire you</option>
         <option value="I want to ask you a question">I want to ask you a question</option>
         <option value="I want to say hello">I want to say hello</option>
      </select>
      <div style="display: none;" id="I want to hire you" class="note">I am currently available</div>
      <div style="display: none;" id="I want to ask you a question" class="note">Feel free to ask</div>
      <div style="display: none;" id="I want to say hello" class="note">Get in touch</div>
   </body>
</html>

联系表格 7：选择 display/hide div

Contact Form 7: display/hide div on selection

javascript

jquery

contact-form-7