选择下拉菜单时如何更改标题文本

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，因为它是通过插件加载的，我只能使用与HTML交互的JavaScript。

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