使用 Ajax HTML 结构选择特定选项时的 jQuery 事件

Question

我想在选择特定选项时创建一个 jQuery 事件。我很熟悉如何使用一般的下拉结构来做到这一点，但我的是一个但不寻常的，它不起作用：

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>

我的 jQuery 尝试：

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

上述情况是当你选择另一个国家时<option>没有随着selected="selected"属性改变。唯一改变的是来自#select2-billing_country-container 的属性title。并且当你改变选择时，Ajax 也参与其中。

我错过了什么或者这怎么能更好？

---

更新 上面的 jQuery 总体上是正确的，它与其他 jQuery 函数有一些冲突。它唯一的事情是不同的，就是在页面加载时，下拉结构正在使用常规<select><option>元素，但在选择不同的选项时，它将使用<span> refors进入ajax请求时。所以上面和道格的回答给出了一个完整的结果。

Answer 1

更新

在页面加载时，正在查看选择菜单，而不是 HTML 结构，因此在页面加载时您需要使用以下代码：

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

您现在可以在页面上保留更改事件。