Question

您好我正在尝试使用菜单栏中的2个下拉列表制作JQM Webapp，例如 -

菜单1 Page SubMenu 1的标题

Menu1有5个主要选项，Menu2有5个子选项，

如果用户从[First Menu]中选择一个选项，5个选项将显示在Submenu1中，每个子菜单都会有一个HTML页面。 [总共将有25页]如

Menu1 - Submenu1 - 新页面[menu1-submenu1.html]

Menu1 - Submenu2 - 新页面[menu1-submenu2.html]

Menu1 - 子菜单3 - 新页面[menu1-submenu3.html]

Menu1 - Submenu4 - 新页面[menu1-submenu4.html]

Menu1 - Submenu5 ---新页面[menu1-submenu5.html]

Menu2 - 子菜单1 - - 新页面[menu2-submenu1.html]

Menu2 - 子菜单2 - - 新页面[menu2-submenu2.html]

Menu2 - 子菜单3 - - 新页面[menu2-submenu3.html]

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

我如何为此事件处理？

以下代码为我的任务提供了一个基本的GUI-http：//jsfiddle.net/aVkgp/198/

Answer 1

如果您为第二个菜单设置了一个值数组，则每次更改第一个菜单时都可以动态“重置”第二个菜单：

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

这将第一个菜单中所选选项的值与第二个菜单中的内容相关联。

以下是演示：http://jsfiddle.net/aVkgp/199/

JQM每个选项的菜单标题和事件处理中的下拉菜单

1 个答案: