Как изменить текст заголовка при выборе выпадающего меню

Question

На моем сайте WordPress я использую jQuery для обновления текста внутри заголовка H2, когда выбраны опции в раскрывающемся меню.

Приведенный ниже код отлично работает здесь, но я не могу заставить его работать на моем живом сайте.

Вот рабочий код, который я использую:

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>

Примечание: я не могу изменить HTML на сайте, потому что он загружается через плагин, я могу только JavaScript, который взаимодействует с HTML.

Answer 1

Тег select не будет вызывать событие «change», если его значение изменяется программно.

Вы должны использовать виджет, который обертывает пользовательский выбор. Немного покопавшись, я обнаружил, что пользовательский выбор создается в файле wpfs. js в строке 1598.

Так что если вы сделаете следующее:

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');
      }
    },
  });
});

, это будет оберните функцию в виджет, и она будет вызвана правильно.

Answer 2

Попробуйте изменить значение selectedValue на $ (this) .val ()