seo Question posted in
Some basic information to get you started with this can be found here.

How to change headline text when a drop down menu is selected – SEO

On my WordPress site I am using jQuery to update the text inside a H2 header when options inside a drop down menu are selected.

The code below works perfectly here, but I cannot get it working on my live site.

Here is the working code that I am using:

jQuery(document).ready(function() {
  jQuery("#wpfs-plan--NjUyMTB").change(function() {
    var selectedValue = this.value;
    if (selectedValue == 'SEO_500_word_articles') {
      jQuery('#price_value').text('299');
    } else if (selectedValue == 'SEO_1000_word_articles') {
      jQuery('#price_value').text('598');
    }
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<h1 style="margin-bottom: 25px;">The price is: <span id="price_value">299</span></h1>

<select id="wpfs-plan--NjUyMTB" style="width: 200px;">
  <option value="SEO_500_word_articles">SEO 500 words $299</option>
  <option value="SEO_1000_word_articles">SEO 1000 words $598</option>
</select>

Note: I cannot change the HTML on the site because it loads via a plugin, I can only the JavaScript that interacts with the HTML.

Tags:

2

Answers


  1. 0

    Try to change the value of selectedValue to $( this).val()

    Login or Signup to reply.
  2. 0

    The select tag will not fire “change” event if its value is changed programmatically.

    You have to use the widget that wraps the custom select.
    With a bit of digging I found out that the custom select is created in the wpfs.js file at line 1598.

    So if you do the following:

    jQuery(document).ready(() => {
  jQuery('#wpfs-plan--NjUyMTB').wpfsSelectmenu({
    change() {
      const selectedValue = this.value;
      if (selectedValue === 'SEO_500_word_articles') {
        jQuery('#price_value').text('299');
      } else if (selectedValue === 'SEO_1000_word_articles') {
        jQuery('#price_value').text('598');
      }
    },
  });
});

    it will wrap the function to the widget and it will be called correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search