jquery mobile多页下拉菜单不显示所选值

Question

我使用他们的多页模板编写了我的第一个 jquery 移动网站。

在我的应用程序中，主页面中的更改会影响子页面下拉列表中的选定值。我第一次进入子页面时，选择并显示了正确的选项。之后，当我转到子页面时，正确的选项是选中（打勾），但显示错误的选项。

我创建了一个 jsfiddle 来演示这个...http://jsfiddle.net/afePj/2/

第一页让您选择一个选项...

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

...并将第二页上的选定值设置为匹配...

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

...当您到达第二页时，我希望显示所选值。但是页面显示一次后，它显示的选项永远不会改变......

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

关于如何使子页面显示所选值的任何想法？

谢谢

Answer 1

当您在 jQuery Mobile 中更新选择菜单时，您需要调用 select menu widget's refresh 菜单以便更新显示以匹配本机元素

例如

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

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