jQM navigating to page programmatically [duplicate]

Question

I'm using 1.4 so the changePage() technique is deprecated and I'd rather not use it...

http://api.jquerymobile.com/jQuery.mobile.changePage/

I have this code:

$("select.start").change(function() {
  alert('test');
  $("#home").pagecontainer("change", "#pick");
  //$("#pick").pagecontainer("change");
});

Neither of the above worked -- the 'change' event is firing but when the select option is selected no page #pick is positioned into place as I require.

Can someone show me what I might be doing wrong?

EDIT |

<select class="start">    <option>Item 1 (Last Done: 2.4 weeks ago)</option> 
  <optgroup label="Section B"> 
    <option value="#">Standing</option> 
  </optgroup>  
</select>

The <optgroup> doesn't seem to make a difference

Answer 1

You can call

$(':mobile-pagecontainer').pagecontainer('change', '#pick');

for example,

http://jsfiddle.net/LDyx6/

js

function test() {
    $(':mobile-pagecontainer').pagecontainer('change', '#page2');
}

html

<div id="page1" data-role="page" data-theme="a">
    <div data-role="header">
        <h1>page1</h1>
    </div>
    <div data-role="content">
         <a href="#page2" data-role="button"> go to page2</a>
        <a href="#" data-role="button" onclick="test()"> go to page2 (script)</a>
    </div>
</div>

<div id="page2" data-role="page" data-theme="b">
    <div data-role="header">
        <h1>page2</h1>
            <a href="#page1" data-role="button" data-direction="reverse" data-icon="back">back</a>
    </div>
    <div data-role="content"></div>
</div>