jQuery show-hide DIV与CONTACT FORM 7下拉菜单(选择字段) [英] jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field)

问题描述

我正在尝试使用CONTACT FORM 7创建一个下拉菜单(在必填字段中)，即选择每个选项时，然后在该下拉菜单下显示一个包含特定消息的div(每个选项上的不同消息)

I am trying to make a dropdown menu (as required field) with CONTACT FORM 7, which is when each option is selected, then a div that contains a certain message (different message on each options) is showing under that dropdown menu.

我的联系表7选择字段生成的代码是这样的:

My Contact Form 7 select field generated code is something like this:

[select* menu-163 id:reason include_blank "I want to hire you" "I want to ask you a question" "I want to say hello"]

这3个示例DIV，当我们将选择从第一个默认空白选项移动到任何特定的已定义选项时，需要分别显示它们:

And these 3 sample DIVs, each of them needs to shows up when we move our selection from the first default blank option to any certain defined options:

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

我正在使用的jQuery:

The jquery that I'm using:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/showhidereason.js"></script>
<script>
$(document).ready(function () {
   $('.note').hide();
   $('#reason').change(function () {
      $('.note').hide();
      $('#'+$(this).val()).show();
   });
});
</script>

问题是:

The problem is:

似乎jquery代码无法获取/识别选择字段的ID，这是我为CONTACT FORM 7下拉菜单定义的#reason.这就是为什么当我选择任何下拉菜单选项时，我的div(隐藏消息)根本不显示的原因.

It seems the jquery code can't get/recognize the ID of the select field, which is #reason that I have defined for my CONTACT FORM 7 dropdown menu. That is why my div (hidden messages) are not showing at all when I select any of the dropdown menu option.

当我我尝试使用普通HTML代码代替来自联系表格7的生成的HTML代码时，上面的jquery代码工作正常(显示div/隐藏的消息)但是此非常选择的字段/下拉菜单却失去了联系表单验证功能的必需的效果" (因为它不是由Contact Form 7生成的代码).

The jquery code above is working fine (div/hidden messages are showing up) when I try making the select field with common HTML code instead of the generated ones from Contact Form 7, but then this very select field/dropdown menu is losing the "required effect" from the contact form validation function (because it's not a Contact Form 7 generated code).

在以下示例网页上，您可以看到jquery代码正在运行，并且所需的效果"失败: http ://lavertibrands.com/contact/

You can see the jquery code is working, as well as the "required effect" is failing at this sample webpage: http://lavertibrands.com/contact/

因此，我决定坚持使用联系表7生成的选择字段/下拉代码，但是在如何使jquery代码识别#reason ID以便显示div(隐藏消息)方面遇到这个问题向上.

So, I decided to stick with the generated select field/dropdown code from Contact Form 7, but having this issue on how to make the jquery code recognize the #reason ID in order to make the div (hidden messages) shows up.

我有什么建议可以让那些div出现吗?提前非常感谢您.

Is there any advice for me to make those div showing up? Thank you so much in advance.

推荐答案

原因"字段的选定值与您的div的#id不对应.

The selected value of the "reason" field does not correspond to the #id of your divs.

尝试一下:

<script>
$(document).ready(function () {
  $('.note').hide();

  $('#reason').change(function () {
    $('.note').hide();
    var val = $(this).val();
    $('#hire').hide();
    $('#question').hide();
    $('#hello').hide();
    if (val == 'I want to hire you') {
      $('#hire').show();
    }
    else if (val == 'I want to ask you a question') {
      $('#question').show();
    }
    else if (val == 'I want to say hello') {
      $('#hello').show();
    }
  });
});
</script>

请参见演示

这篇关于jQuery show-hide DIV与CONTACT FORM 7下拉菜单(选择字段)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！