HTML：

Question

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

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

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

当我们将选择从第一个默认空白选项移动到任何特定的选项时，这三个样本DIV都需要显示：

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

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

问题是：

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

上面的jquery代码工作正常（显示div /隐藏消息）当我尝试使用常见HTML代码生成选择字段来自Contact Form 7时生成的 但是这个非常精选的字段/下拉菜单正在从联系表单验证功能中失去“必需的效果”（因为它不是Contact Form 7生成的代码）。

您可以看到jquery代码正常工作，以及此示例网页上的“必需效果”失败：http://lavertibrands.com/contact/

所以，我决定坚持使用Contact Form 7生成的选择字段/下拉代码，但是如何使jquery代码识别#reason ID以便生成div（隐藏消息））出现。

我有什么建议让这些div出现吗？非常感谢你。

Answer 1

“reason”字段的选定值与div的#id不对应。

试试这个：

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

请参阅DEMO

Answer 2

您可以使用等于div值的值更改id option s。然后在change select div使用option value

找到所需的

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

HTML：

$('.note').hide();

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

的JavaScript：

{{1}}

jquery show-hide DIV with CONTACT FORM 7下拉菜单（选择字段）

2 个答案:

HTML：

的JavaScript：

演示是HERE