私のモバイル ページには 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() 関数の最後の行は、両方のセレクターの選択されたオプションを設定する必要があります。
最初のページで言語を選択すると、両方のセレクターで選択された値が変更されます。しかし、2 番目のページで言語を選択すると、選択された値は両方のセレクターで変更されません。
これはなぜですか、どうすれば解決できますか?
編集
最後にそれが機能しました：
$(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");
});
現在、選択メニューは更新されません。ソース コード (firebug を使用) では正しいアイテムが選択されていますが、フロントエンドでは間違ったアイテムが表示されます。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);
});
長いセレクターは気にしないでください。正しいドロップダウンがあることを確認したいだけです;)