Twitter Bootstrap SelectPicker OnChange функция не вызывается

Question

Поэтому у меня есть простой список выбора

<select id="themes" class="selectpicker"> 
    <option selected>mkl-ambiance</option> 
    <option>default</option> 
    <option>ambiance</option> 
    <option>blackboard</option> 
</select> 

и небольшой Snippit из JQuery

$("#themes").change(function() { 
     var theme = $("#themes").val(); 
     editor.setOption("theme", theme); 
    }); 

если удалить class="selectpicker" от выбора обратного вызова работает ожидается. Я даже добавил onchange="doMyFunction и изменил $("#themes").change(function() { на function doMyFunction() {, и это еще не сработало. Есть ли какая-то маска начальной загрузки, которую я пропускаю, чтобы заставить ее работать правильно?

Answer 1

Это потому, что Selectpicker генерирует <ul> и <li> теги и сохраняет <select> и <option> в сторону. Он добавляет атрибут rel к каждому элементу <li>, чтобы узнать, какая опция выбрана в отношении выбранного <li>.

В любом случае, вы должны использовать либо официальное событие OnChange из плагина Selectpicker, или сделать что-то вроде следующего:

$('ul.dropdown-menu.selectpicker li').on('click', function() { 
    var selectedValue = $($('select.selectpicker option')[$(this).attr('rel')]).val(); 
});