Question

我关注这篇文章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>

Answer 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>

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

1 个答案: