Я хотел бы создать событие 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>
My 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" при выборе другой страны. Единственное, что меняется, это атрибут title из #select2-billing_country-container. И при изменении выбора Ajax также участвует.
Что мне не хватает или как это может быть лучше?
Обновление
Вышеупомянутый jQuery был в целом правильным, у него были некоторые конфликты с другими функциями jQuery. Единственное, что отличало его, это то, что при загрузке страницы в раскрывающейся структуре используются общие элементы <select><option>, но при выборе другого параметра он превращается в запрос Ajax с использованием <span>. Так что выше и с ответом Дуга дал полный результат.