javascript - Update selectedIndex options menu with JQuery.MSDropDown - Stack Overflow

admin管理员组

文章数量:1314554

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.

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.

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Jul 16, 2013 at 16:22 Ozzy asked Jul 16, 2013 at 15:36 OzzyOzzy 8,32277 gold badges5757 silver badges9696 bronze badges 8

• jQuery hint: $('#selectElem') is a shortcut for document.getElementById('selectElem'); – Diodeus - James MacFarlane Commented Jul 16, 2013 at 15:51
• @Diodeus in the chance that jQuery may have had extra functionality to fix these things I also tried the jQuery method – Ozzy Commented Jul 16, 2013 at 15:54
• @Ozzy Why the down vote? You didn't mention in your code that you tried $('#selectElem').attr('selectedIndex',i);. Sorry, I'm just trying to help. – Ross Commented Jul 16, 2013 at 15:58
• You can't assume Ozzy was the one who down-voted. – Diodeus - James MacFarlane Commented Jul 16, 2013 at 15:59
• @Diodeus Aha, so it was you! – Ross Commented Jul 16, 2013 at 16:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 9

Try this -

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

Here is the plete 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);
    }

});

本文标签： javascriptUpdate selectedIndex options menu with JQueryMSDropDownStack Overflow