jQuery Mobile - changePage 和选择菜单不起作用

Question

这是我第一次使用 jQuery Mobile，我实际上是从我得到的 WP 主题中使用它。我知道这可能与主题有关，但我只是想确定一下。

所以，它是一个 Wordpress jQuery Mobile 主题，您插入它，它就可以工作了。问题是，我已将 Wordpress 菜单从 UL 转换为 SELECT。

然后，我添加了一些 jQuery，通过获取所选选项的值来触发更改时的选择。那行得通，我得到加载的东西，然后页面以我想要的效果改变。

但我无法让“选择”菜单显示当前选定的项目。它总是恢复到第一个。

我用过：

$('#main_menu').selectmenu("refresh");
$('#main_menu').selectmenu("refresh", true);

什么都没有……

您可以在此处查看该站点：http://avatarblog.fl1hosting.com/ 并查看源代码。

你会看到我的移动事件都在 jQuery Mobile 包含之前，这对我来说没有多大意义，但如果我把它们放在之后，就没有任何效果了。

任何帮助将不胜感激！

谢谢

Answer 1

您需要设置要在选择菜单中显示的选项。试试这个，

$("#main_menu")[0].selectedIndex = 2; // this will select the 3rd in the menu list
$("#main_menu").selectmenu("refresh");

您可以在 header.php 中添加以下脚本：

$(document)
.unbind("pageshow.initMenuBtn")
.bind("pageshow.initMenuBtn", 
    function() {
        $.mobile.activePage = $("div.ui-page-active");
        $("#main_menu", $.mobile.activePage)
          .unbind("change")
          .bind("change", function() {
                var page = $(this).val();
                $.mobile.changePage(page);
            });

        var selectedIndex = 0;
        $("#main_menu>option", $.mobile.activePage).each(function(index) {
            if ($(this).hasClass("current-menu-item")) {
                selectedIndex = index;
            }
        });
        $("#main_menu", $.mobile.activePage)[0].selectedIndex = selectedIndex;
        $("#main_menu", $.mobile.activePage).selectmenu("refresh");
    });