TAGS :Viewed: 14 - Published at: a few seconds ago

[ JQM Drop downs in menu header and event handling for each option ]

Hello i am trying to make a JQM Webapp with 2 drop downs in menu bar something like -

Menu 1 Title of Page SubMenu 1


Menu1 has 5 Main options and Menu2 has 5 sub options ,

like if user selects a option from [First Menu ] 5 options will show up in Submenu1 and there will be an HTML page for each submenu. [so total there will be 25 pages] like

Menu1 --Submenu1 --A new page [menu1-submenu1.html]

Menu1 --Submenu2 --A new page [menu1-submenu2.html]

Menu1 --Submenu3 --A new page [menu1-submenu3.html]

Menu1 --Submenu4 --A new page [menu1-submenu4.html]

Menu1 --Submenu5 ---A new page[menu1-submenu5.html]

Menu2 --Submenu1 - --A new page [menu2-submenu1.html]

Menu2 --Submenu2 - --A new page [menu2-submenu2.html]

Menu2 --Submenu3 - --A new page [menu2-submenu3.html]

....................................

How can i do event handling for this?

The following code i have gives me a basic GUI for my task-http://jsfiddle.net/aVkgp/198/

Answer 1


If you setup an array of values for the second menu you can dynamically "reset" the second menu each time the first is changed:

var secondMenu = [
        '<option value="1-1">1</option><option value="1-2">3</option><option value="1-3">3</option>',
        '<option value="2-1">1</option><option value="2-2">3</option><option value="2-3">3</option>',
        '<option value="3-1">1</option><option value="3-2">3</option><option value="3-3">3</option>'
    ];
$('#select-choice-1').on("change", function(e){
    $("#select-choice-2").html(secondMenu[$(this).val()]).selectmenu('refresh');
}).trigger('change');//initialize for first-load​

This relates the value of the selected option in the first menu to the content in the second menu.

Here is a demo: http://jsfiddle.net/aVkgp/199/