联系表格 7：在选择时显示/隐藏 div答案

【问题标题】：Contact Form 7: display/hide div on selection联系表格 7：在选择时显示/隐藏 div
【发布时间】：2015-10-23 17:42:40
【问题描述】：

我正在关注这个帖子jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field) 根据选择创建显示/隐藏。

我刚刚创建了表单，但是如何实现 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>

【问题讨论】：

您真的按照链接中问题答案中提到的方式完成了吗？
您是如何尝试创建html、head 和body 标签的？ js代码上面你粘贴到哪里了？
@ViniVasundharan 是的，问题是：我不知道在哪里粘贴那个 jQuery 函数。
这是我最困惑的一件事。我宁愿通过将脚本放在头部和正文之后来试错。
也许有人可以帮助您找到放置 jquery 的正确位置。

标签： javascript jquery contact-form-7

【解决方案1】：

你忘记的事情是：

添加jquery.js文件引用

将代码包装在document.ready 中并提及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>

【讨论】：

任何时候..快乐编码..:)