使用JS根据选择的选定选项值显示隐藏div

Question

您好，我有这段代码可以在 JSFiddle 上运行，但我无法让它在我的网站上运行。我的网站在 Wordpress 6.4.2 上运行

我有一个选择，如果所选值不是英镑，我希望显示一条消息，该消息位于购物车的结账按钮下方。

我不知道我做错了什么？

我的网站是：

粉红奎因

JSFiddle 是：

参见这个 JSFiddle

选择代码是：

<div class="widget "> <form>
<select name="currency" id="currency" aria-label="" onchange="if (!window.__cfRLUnblockHandlers) return false; this.form.submit()">
<option value="GBP">🇬🇧 £ GBP</option>
<option value="AUD" selected="">🇦🇺 $ AUD</option>
<option value="CAD">🇨🇦 $ CAD</option>
<option value="EUR">🇪🇺 € EUR</option>
<option value="JPY">🇯🇵 ¥ JPY</option>
<option value="NZD">🇳🇿 $ NZD</option>
<option value="ZAR">🇿🇦 R ZAR</option>
<option value="USD">🇺🇸 $ USD</option> 
</select>
</form>
</div>


 <div class="currency-msg" >
 Please change currency to GBP to see Clearpay and PayPal installment options
 </div>

JS 是：

$(document).ready(function(){
var Currency = jQuery('#currency');
var select = this.value;
$('.currency-msg').hide();
Currency.change(function () {
    if ($(this).val() != 'GBP') {
        $('.currency-msg').show();
    }
    else $('.currency-msg').hide(); // hide div if value is  "GBP"
});

});

我也尝试过这个，它也适用于 JSFiddle 但不适用于我的网站，我一定错过了一些非常简单的东西？

jQuery(document).ready(function(){
   
        var Currency = jQuery('#currency');
        var select = this.value;
        
        Currency.change(function () {
            if ($(this).val() != 'GBP') {
                $('.currency-msg').css('display','block');
            }
            else $('.currency-msg').css('display','none'); // hide div if value is  "GBP"
        });
        
     
    
    });

Answer 1

我解决了这个问题，每次货币更改时都会重新加载页面，实际上没有更改事件。

因此我简化了查询：

jQuery(document).ready(function(){
   
       if (jQuery('#currency').val() != 'GBP') {
           jQuery('.currency-msg').css('display','block');
       }
       else jQuery('.currency-msg').css('display','none'); // hide div if value is  "GBP"
   });