CODEWITHSUNDEEP
javascriptjqueryhtmldom
Ozzy
Ozzy

Reputation: 8312

Update selectedIndex options menu with JQuery.MSDropDown

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.

Upvotes: 3

Views: 4011

Answers (2)

MD. Shafayatul Haque
MD. Shafayatul Haque

Reputation: 998

Here is the complete code:

$(document).ready(function() {
    $("#Country").msDropdown();


    var country_code = 'in';
    var i = 0;
    var indexNumber = 0;
    $("#Country option").each(function(){
        if($(this).val() == country_code){
            indexNumber = i;
        }
        i++;
    });
    var oHandler = $('#Country').msDropDown().data("dd");
    if(oHandler) {
        oHandler.set("selectedIndex", indexNumber);
    }

});

Upvotes: 0

Ross
Ross

Reputation: 3330

Try this -

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

Upvotes: 9

Related Questions