Show Hide a div based on selected option value of a select using JS

Question

Hi I have this code that is working on JSFiddle, but I cannot get it working on my website. My website is running on Wordpress 6.4.2

I have a select where I want a message to show if the selected value is NOT GBP, this message is on the cart under the checkout button.

I have no idea what I am doing wrong?

My website is:

PINKEQUINE

JSFiddle is:

See THIS JSFiddle

Select code is:

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

And the JS is:

$(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"
});

});

I also tried this, which also works on a JSFiddle But not on my website, I must be missing something really simple?

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

I solved this, the page was re-loaded every time the currency changed, there effectively was no change event.

As such I simplified the query:

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"
   });