我已将选项值实现为下拉菜单导航。我遇到的问题是，当我从页面 A 更改到页面 B 时，我希望页面 B 处于事件状态，并且我希望它成为下拉菜单中可见的主要选项，反之亦然。请看下面的代码:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- Start of index page -->
<div data-role="page" data-theme="b" id="page_a">
<div data-role="header" data-position="inline">
<h1>A</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="#page_a">Page A</option>
<option value="#page_b">Page B</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Page A</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /index page -->
<!-- Start of about page -->
<div data-role="page" data-theme="b" id="page_b">
<div data-role="header" data-position="inline">
<h1>B</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-2"></label>
<select name="select-custom-2" id="select-custom-2" data-native-menu="false">
<option value="#page_a">Page A</option>
<option value="#page_b">Page B</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-2').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Page B</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /about page -->
</body>
</html>
最佳答案
首先，在每个页面上将 selected 属性添加到与页面匹配的选项，并将相同的类名称分配给所有页面上的所有导航选择(在我的示例中为 class="navSelect") 。所以在页面a上:
<select name="select-custom-1" id="select-custom-1" data-native-menu="false" class="navSelect">
<option value="#page_a" selected="selected">Page A</option>
<option value="#page_b">Page B</option>
</select>
在b页上:
<select name="select-custom-2" id="select-custom-2" data-native-menu="false" class="navSelect">
<option value="#page_a">Page A</option>
<option value="#page_b" selected="selected">Page B</option>
</select>
现在从页面中删除脚本，并在页面底部的类名上使用一个更改处理程序:
$(document).on("change", ".navSelect", function (e) {
var url = $(this).val(); // get selected value
var curPage = $("body").pagecontainer( "getActivePage" );
//reset this select to the current page
$(this).val("#" + curPage.prop("id")).selectmenu( "refresh", true );
if (url) { // require a URL
$.mobile.changePage(url, {
transition: "slide",
changeHash: false
});
}
});
脚本会像原始页面一样更改页面，但它还会将选择重置为当前页面 ID，以便当您返回页面时它会显示正确的值。另请注意，在 jQM 中，更新底层 select 时，必须在小部件上调用 .selectmenu( "refresh", true )。
Here is a DEMO
关于javascript - jQuery Mobile 选项值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23779656/