[英]Contact Form 7: display/hide div on selection
i'm following this post jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field) to create a display/hide depending on selection.我正在关注这篇文章jquery show-hide DIV with CONTACT FORM 7 下拉菜单(选择字段)以根据选择创建显示/隐藏。
I just created the form, but then how wo implement the jquery function?我刚刚创建了表单,但是如何实现jquery功能呢? I've to create a html, head, body tags in the contact form 7 page?我必须在联系表格 7 页面中创建 html、head、body 标签? Beacause i'm trying but does not works.因为我正在尝试但不起作用。
<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 jQuery
$('.note').hide();
$(document).on("change", "#reason", function() {
$('.note').hide();
var neededId = $(this).val();
var divToShow = $(".note").filter("[id='" + neededId + "']");
divToShow.show();
});
EDIT:编辑:
<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>
Things you forgot are:你忘记的事情是:
- To add
jquery.js
file reference添加jquery.js
文件引用- To wrap code in
document.ready
and also to mention type ofscript
在document.ready
包装代码并提及script
类型
Make below changes to your html
对您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.