Update selectedIndex options menu with JQuery.MSDropDown

Question

I'm using a <select> options menu with jQuery.msDropDown but for some reason the DOM won't update after setting the select.selectedIndex property with javascript/jquery.

After I click on the drop-down menu then click back on the page (to close it) it does update with the correct selectedIndex.

I'm updating the selectedIndex in a loop like this:

    $.fn.[unrelated function].after = function( opts, curr, next, fwd ) {
        var $sel = document.getElementById('selectElem');
        for(var i = 0, j = $sel.options.length; i < j; ++i) {
            if(($sel.options[i].value).substr(1) == next.title) {
                //I have tried various ways here
                $sel.selectedIndex = i;
                //$('#selectElem').prop("selectedIndex",i);
                break;
            }
        }
    };

P.S. there doesn't seem to be any documentation for msDropDown otherwise I would have tried to identify what event would trigger an update of the box.

Answer 1

Try this -

var oHandler = $('#selectElem').msDropDown().data("dd");
if(oHandler) {
    oHandler.set("selectedIndex", i);
}