【发布时间】：2013-07-02 03:28:03
【问题描述】：
我的移动页面有 2 个“页面”（使用 jQuery Mobile 的多页面模板）。 现在我有一个语言选择器（下拉菜单）。此选择器出现在两个页面上。
相关代码：
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="scripts/style/jquery.mobile-1.3.1.min.css" />
<script src="scripts/javascript/jquery-1.9.1.min.js"></script>
<script src="scripts/javascript/jquery.mobile-1.3.1.min.js"></script>
<script src="scripts/javascript/translations.js"></script>
</head>
<body>
<div class="container">
<form action="#" method="POST">
<div class="formContent" data-role="page" id="one">
<div data-role="header" class="ui-header-fixed">
<div data-role="navbar">
<ul>
<li></li>
<li><label for="language" class="select"></label> <select
name="language" id="language" class="lang" data-corners="false"
data-iconpos="noicon" onchange="trans($(this));">
<option value="english">En</option>
<option value="dutch">Nl</option>
<option value="german">De</option>
</select></li>
</ul>
</div>
</div>
<div class="content">
<!-- Content -->
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#one" class="ui-disabled">Vorige</a></li>
<li><a href="#two">Volgende</a></li>
</ul>
</div>
</div>
</div>
<div class="formContent" data-role="page" id="two">
<div data-role="header" class="ui-header-fixed">
<div data-role="navbar">
<ul>
<li></li>
<li><label for="language" class="select"></label> <select
name="language" id="language" class="lang" data-corners="false"
data-iconpos="noicon" onchange="trans($(this));">
<option value="english">En</option>
<option value="dutch">Nl</option>
<option value="german">De</option>
</select>
</li>
</ul>
</div>
</div>
<div class="content">
<!-- Content -->
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#one">Vorige</a></li>
<li><a href="#two" class="ui-disabled">Volgende</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<script>
translate($('.lang').val());
function trans(it){
var v = it.val();
translate(v);
$(".lang option[value='" + v + "']").attr('selected', 'selected');
}
</script>
</body>
</html>
翻译();包含翻译。 trans() 函数的最后一行应该设置两个选择器的选定选项。
现在，当我在第一页上选择一种语言时，两个选择器上的选定值都会发生变化。但是当我在第二页上选择一种语言时，两个选择器上的选定值都不会改变。
为什么会这样，我该如何解决？
编辑
终于搞定了：
$(document).on('change', '#language', function () {
var v = $(this).val();
translate(v);
$("#language option").removeAttr('selected');
$("#language option[value='" + v + "']").attr('selected', 'selected');
$("#language").selectmenu("refresh");
});
现在选择菜单不会刷新。在源代码中（使用萤火虫）选择了正确的项目，但在前端它显示了错误的项目。好像 selectmenu('refresh');没用。
已解决
我最终自己设置了显示值：
$(document).on('change', '#language', function () {
var v = $(this).val();
translate(v);
$("#language option").removeAttr('selected');
$("#language option[value='" + v + "']").attr('selected', 'selected');
$(".ui-header .ui-navbar .ui-grid-a .ui-block-b .ui-select .ui-btn .ui-btn-inner .ui-btn-text span").html(v);
});
不要介意长选择器，我只是想确保我有正确的下拉列表；）
【问题讨论】：
-
提供完整代码，你在调用 onChange 进行选择吗？
-
-
贴出你的完整代码，让我看看你是如何引用和切换页面的
-
添加了完整代码。 （volgende = 下一个，vorige = 上一个。在荷兰语中）
-
hm 当我访问第二页时，第一页有同样的问题.. 编辑：它只有在我第一次选择语言时才能正常工作。
标签： jquery jquery-mobile transition