Fatal编程技术网

Javascript jQuery移动选项值

javascript jquery jquery-mobile

Javascript jQuery移动选项值,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我已经实现了选项值作为下拉菜单导航。我的问题是，当我从A页切换到B页时，我希望B页处于活动状态，我希望它成为下拉菜单中可见的主要选项，反之亦然。请看下面的代码： <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" h

我已经实现了选项值作为下拉菜单导航。我的问题是，当我从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>
脚本会像更改原始页面一样更改页面，但它也会将“选择”重置为当前页面id，以便在返回页面时显示正确的值。还要注意，在jQM中，当更新基础select时，必须在小部件上调用.selectmenu refresh，true

这是一个

请给我们更多的信息。基本上我想知道什么是初始状态，有多少页面，选择放置在哪里。当我们改变select元素时，预期的结果是什么。最好创建一个工作的JSFIDLE示例，不要从abowe复制代码，因为这对于工作的示例来说是不够的。这里有一个JSFIDLE模板：基本上我想看看你现在有什么，你期望什么，如果你想让我们给你一个答案，这至少是你可以做的。ezanker你太棒了！你又帮了我。谢谢，非常感谢！你真是个天才。请pm我flymen777[在]gmail[网站]上 
<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
        });
    }
});