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

Question

您好，我正在尝试在菜单栏中制作一个带有 2 个下拉菜单的 JQM Webapp，例如 -

菜单 1 页面子菜单 1 的标题

---

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

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

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

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

Menu1 --Submenu3 --一个新页面[menu1-submenu3.html]

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

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

Menu2 --Submenu1 - --一个新页面 [menu2-submenu1.html]

Menu2 --Submenu2 - --一个新页面[menu2-submenu2.html]

Menu2 --Submenu3 - --一个新页面 [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/