jquery mobile multipage dropdown not displaying selected value

Question

I have written my first jquery mobile site using their multipage template.

In my application, Changes in the main page can affect the selected value in a drop down in a sub page. The first time I go to the sub page, the correct option is selected and displayed. After that, when I go to the sub page, the correct option is selected (ticked), but the wrong option is displayed.

I created a jsfiddle to demonstrate this... http://jsfiddle.net/afePj/2/

page one lets you select an option...

<select name="selectname1" id="selectid1" onChange="changePageTwo()">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select> 

...and sets the selected value on page two to match...

function changePageTwo() {
    select1 = document.getElementById('selectid1');
    select2 = document.getElementById('selectid2');
    select2.selectedIndex = select1.selectedIndex;
}

...when you arrive on page two I would like the selected value to be displayed. But after the page has been displayed once, the option it shows never changes...

<select name="selectname2" id="selectid2">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

Any ideas about how I can make the sub page display the selected value?

Thanks

Answer 1

When you update a select menu in jQuery Mobile you need to call the select menu widget's refresh menu so that the display is updated to match the native elements

For example

$('selectid2').selectmenu('refresh');

http://jsfiddle.net/afePj/4/