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>的{{1}}属性没有改变。唯一更改的是selected="selected"中的属性title。并且当您更改选择时，也会涉及到Ajax。

我想念的是什么？怎么能更好？

更新上面的jQuery通常是正确的，它与其他jQuery函数有一些冲突。唯一不同的是，在页面加载时，下拉结构使用的是常规#select2-billing_country-container元素，但是当选择其他选项时，它会使用<select><option>变成Ajax请求。因此，以上以及道格的回答给出了完整的结果。

Answer 1

更新

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

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

，您可以立即在页面上保留更改事件。

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

1 个答案: