jQuery event when specific option is selected with Ajax HTML structure

Question

I would like to create a jQuery event when a particular option is selected. I am familiar how to do this with a general dropdown structure, but mine is a but unusual and it doesn't work:

HTML

<span class="input-wrapper">
    <select name="country" id="billing_country" class="country_select" autocomplete="country" tabindex="-1" aria-hidden="true">
        <option value="" selected="selected">Select a country…</option>
        <option value="BE">Belgium</option>
        <option value="NL" selected="selected">Netherlands</option>
    </select>
    <span class="select2-container" dir="ltr" style="width: 100%;">
        <span class="selection">
            <span class="select2-selection" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-billing_country-container" role="combobox">
                <span class="select2-selection__rendered" id="select2-billing_country-container" role="textbox" aria-readonly="true" title="Belgium" style="color: rgb(51, 51, 51);">Belgium</span>
            </span>
        </span>
    </span>
</span>

My jQuery attempt:

jQuery('#billing_country').change(function(){
    jQuery(document).ajaxComplete( function() {
        if( jQuery('#select2-billing_country-container').attr('title') == 'Netherlands'){
            jQuery('#billing_address_2_field').addClass('hide'); // random event
        }
    });
});

The above situation is that the <option> is not changing with the selected="selected" attribute when you select another country. The only thing that changes is the attribute title from #select2-billing_country-container. And when you change the selection Ajax is also involved.

What am I missing or how can this be better?

Update The above jQuery was in general correct, it had some conflicts with other jQuery functions. The only thing that it made it different, was the fact that on page load the dropdown structure is using the general <select><option> elements, but when selecting a different option it turns into an Ajax request, using the <span>. So above and with Doug's answer gave a full result.

Where is the element with an id of billing_country? All I see is an ID for country. — Doug F
– Doug F, Commented Mar 17, 2019 at 14:38
@DougF Yes I have improved it. However that's not the issue here, I modified the original html a little. — Demian
– Demian, Commented Mar 17, 2019 at 14:41
The thing is, you're not making any kind of Ajax request, so the code under your ajaxComplete is not going to execute. Also, you have no div with a class of element, so you're not going to see anything happen anyway. — Doug F
– Doug F, Commented Mar 17, 2019 at 14:48
I took a look on the checkout page and looked for it with jQuery("div.element") but it didn't return anything. — Doug F
– Doug F, Commented Mar 17, 2019 at 15:02
Please look for the actual elements on line 17 in the sources console, JS-file is called checkout-page.js — Demian
– Demian, Commented Mar 17, 2019 at 15:09

Doug F · Accepted Answer · 2019-03-17 16:14:24Z

1

UPDATE

On page load, the select menu is being looked at, not the HTML structure, so on page load you need to have this code:

    if( jQuery('#billing_country').val() == 'NL'){
        jQuery('#billing_address_2_field').css('display', 'none');
    }

and you can leave your change event as you have it on your page now.

edited Mar 17, 2019 at 16:14

answered Mar 17, 2019 at 16:00

Doug F

8942 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Demian Over a year ago

Could you take a look at the original page? Because this is what I have done, except not using the function HideAddressTwo. I just fully coded it. On page load, when the country is pre-selected, it's not working.

Doug F Over a year ago

@Demian Yes I see what you mean. I've updated the answer.

Demian Over a year ago

Yes, such a small detail, it did the trick. Thanks for your time and effort. Highly appreciated.

Doug F Over a year ago

It's always the little details isn't it? :) Glad to help and have a good rest of your day.

Collectives™ on Stack Overflow

jQuery event when specific option is selected with Ajax HTML structure

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related