CODEWITHSUNDEEP
javascriptjquery
TinyTiger
TinyTiger

Reputation: 2111

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

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.

Upvotes: 0

Views: 77

Answers (2)

Giuliano Collacchioni
Giuliano Collacchioni

Reputation: 299

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.

Upvotes: 1

JAR
JAR

Reputation: 804

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

Upvotes: 0

Related Questions