How to change page using Jquery mobile select menu?

Question

I am developing an app where i am using select menu in it. As i am new to developing i don't know how to change page when select menu was selected. I tried onclick events & onchange events on select menu but they are not working. The code i am using is

code:

index.html

<section id="previewPage" data-role="page">
  <div data-role="content" id="previewId" class="previewScreen">


        <select name="select-choice-0" id="select-choice-1" data-native-menu="false">
            <option value="email">Share via Email</option>
            <option value="bbm">Share via BBM</option>
            <option value="sms">Share via SMS</option>
            <option value="facebook">Share via Facebook</option>
            <option value="twitter">Share via Twitter</option>
            <option value="google">Share via Google</option>
        </select>                       
        </div>

    </section>

As per the above code when i clicked on Share via Email or Share via BBM it needs to navigate page to those particular html pages. For example when i clicked on Share via BBM option my project needs to change page from index.html to BBM.html page.

Canany one please help me with this...... Thanks in advance...

Answer 1

jQuery Mobile exposes $.mobile.changePage method. You can solve the problem with this.

If the pages which need to be navigated are in the same directory as "index.html", you can use js below.

$(function(){

    $('select').change(function() {
        var nextpage = $(this).children('option:selected').attr('value');
        $.mobile.changePage( nextpage + '.html' );
    });

});​

DEMO:jsfiddle (multi-page sample)