CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user3652057
user3652057

Reputation: 105

jQuery Mobile Option Value

I have implemented option value as drop down menu navigation. The issue I have is when I change from page A to page B, I want page B to be in active state and I want it to be the primary option visible in the dropdown menu and the other way round. Please take a look at the code below:

<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>

Upvotes: 0

Views: 134

Answers (1)

ezanker
ezanker

Reputation: 24738

First, on each page add the selected attribute to the option that matches the page and assign the same class name to all navigation selects on all your pages (class="navSelect" in my example). So on page 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>

and on page 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>

Now remove the scripts from the pages and instead use one change handler on the class name at the bottom of your page:

$(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
        });
    }
});

The script changes page just like your original, but it also resets the select to the current page id so when you return to the page it displays the correct value. Also note that in jQM, when updating the underlying select, you must call .selectmenu( "refresh", true ) on the widget.

Here is a DEMO

Upvotes: 1

Related Questions