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

I'm trying to set the defaul开发者_如何学Pythont 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...

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.

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.

it works. maybe you might want to provide more details.

http://jsbin.com/ekayu3/2