Setting a default selection in a select menu in JQuery Mobile?

Question

I'm trying to set the default selection in a select menu in JQuery mobile. The docs have this:

   var myselect = $("select#foo");
   myselect[0].selectedIndex = 3;
   myselect.selectmenu("refresh");

Which I added right underneath where I create the menu, but then when I run the code I get this error:

throw "cannot call methods on " + name + " prior to initialization; " + "attempted to call method '" + options + "'";

Not sure what to do at this point...

Answer 1

You're trying to manipulate DOM objects with javascript that haven't loaded yet. Move the javascript past the form you're trying to manipulate, or more your code into a function that executes on document load.

For example:

$('#PAGE').live('pagecreate',function(event){
    var myselect = $("select#foo");
    myselect[0].selectedIndex = 3;
    myselect.selectmenu("refresh");
});

where PAGE is the id of the page you're loading that contains the menu you want to manipulate.

---

EDIT:

I updated the example to use the JQuery Mobile pagecreate event based on jinyuan's comment regarding JQuery Mobile events.

Answer 2

As jQuery function:

$.fn.jqmSelectedIndex = function(index){
    var self = $(this)
    self
        .prop('selectedIndex', index)
    .selectmenu("refresh");

    return self;
}

$("select#foo").jqmSelectedIndex(3);

This isn't validated but works.