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)

Answer 2

one option is adding data- attributes to option tags:

<option value="bbm" data-location='www.example.com/bbm.html'>Share via BBM</option>

$('#select-choice-1').change(function() {
   window.location = $(this).data('location')  
})

data()

Answer 3

I'm using the following to code to change page url with a selectbox, as a menu.

$('#menu-select').change(function() {
   window.location = $(this).data('location')  
})

The javascript:

 <select name='select-choice-1' id="menu-select">
    <option value="">Menú:</option>
    <option value="index.php">Noticias</option>
    <option value="index.php#tramites" data-location='index.php#tramites'>Trámites</option>
    <option value="index.php#twitter" data-location='index.php#twitter'>Twitter</option>
    <option value="virgen_del_valle.php">Parque Virgen del Valle</option>
    </select>

I have three pages:

• index.php (with contain to pages or data-role="page" with and id)
• news.php
• event.php

The problem is that when I select, for example, Home option, then More Information and tried to go to Event, it didn't load the page.

I think this code must have a conditional for internal pages and for external url.

Hope you can

Answer 4

var a = document.createElement('a');
a.href='http://google.com/';
a.rel = 'external';
a.target = '_top';
document.body.appendChild(a);
a.click();

Jsfiddle