jquery show-hide DIV with CONTACT FORM 7 dropdown

问题:

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.

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

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>

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:

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.

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

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

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.

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

回答1:

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

Try this:

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

See DEMO

回答2:

You can change div ids with values, equal to option values. Then on change in select find needed div using option value

HTML:

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

JavaScript:

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

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

Demo is HERE