CODEWITHSUNDEEP
javascriptjquery-mobileselect-menu
meds
meds

Reputation: 22916

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

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...

Upvotes: 4

Views: 10842

Answers (3)

Renzo Castro
Renzo Castro

Reputation: 186

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.

Upvotes: 3

ironchefpython
ironchefpython

Reputation: 3409

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.

Upvotes: 7

root
root

Reputation: 1583

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

http://jsbin.com/ekayu3/2

Upvotes: 1

Related Questions