jquery mobile - set select/option values

Question

am trying to set select/option values using jquery Mobile and can\'t seem to get it working.

Answer 1

When programmatically manipulating elements like select fields in jQuery Mobile, once you've made the relevant selection, you need to refresh the element so that the user interface is updated. Here's an example snippet which sets a value in a select field, and then updates it:

// Grab a select field
var el = $('#YOUR_SELECT_FIELD');

// Select the relevant option, de-select any others
el.val('some value').attr('selected', true).siblings('option').removeAttr('selected');

// jQM refresh
el.selectmenu("refresh", true);

So it's that last line I suspect you need.

Answer 2

In some cases you might need to wrap your function to execute on document.ready and initialize the selectmenu. Here is my solution using Ben Poole's example:

$(document).ready(function(){
// Grab a select field
var el = $('#YOUR_SELECT_FIELD');

// Select the relevant option, de-select any others
el.val('some value').attr('selected', true).siblings('option').removeAttr('selected');

// Initialize the selectmenu
el.selectmenu();

// jQM refresh
el.selectmenu("refresh", true);
});