CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Tim
Tim

Reputation: 1249

Twitter Bootstrap SelectPicker onchange function not being called

So I have a simple select list

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

and a small snippit of jquery

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

if I remove class="selectpicker" from the select the call back works as expected. I even added onchange="doMyFunction and changing $("#themes").change(function() { to function doMyFunction() { and that still didn't work. Is there some bootstrap magic I'm missing to get this to work properly?

Upvotes: 0

Views: 10807

Answers (1)

user3086253
user3086253

Reputation: 31

This is because Selectpicker generates <ul> and <li> tags and keeps the <select> and <option> aside. It adds 'rel' attribute to each <li> element for you to know which option is selected in relation to the selected <li>.

Anyways, you should either use an official onChange event from the Selectpicker plugin, or do something like the following:

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

Upvotes: 3

Related Questions