javascript - jQuery 移动 : applying method selectmenu on multiple select fields

Question

在我的 jQuery Mobile 页面上，我想实现多个过滤器选择菜单。仅使用一个选择菜单和一个 id 即可完全正常工作，但使用多个时则不行。

JSFiddle 解决我的问题: http://jsfiddle.net/asvyY/40/

(相比之下，我的 fiddle 只有一个选择菜单和选择菜单 ID 有效: http://jsfiddle.net/asvyY/41/ )

错误消息:

Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'

我的代码:

HTML:

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <form>
            <select class="filter-menu" data-native-menu="false">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>

             <select class="filter-menu" data-native-menu="false">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>

             <select class="filter-menu" data-native-menu="false">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </form>
    </div>
</div>

JS:

$(document).on("pagecreate", "#page1", function(){   
    $(".filter-menu").selectmenu( "refresh", true );
});

$.mobile.document
    .on("listviewcreate", "#filter-menu-menu", function (e) {
        var input,
        listbox = $("#filter-menu-listbox"),
            form = listbox.jqmData("filter-form"),
            listview = $(e.target);

        if (!form) {
            input = $("<input data-type='search'></input>");
            form = $("<form></form>").append(input);

            input.textinput();

            $("#filter-menu-listbox")
                .prepend(form)
                .jqmData("filter-form", form);
        }

        listview.filterable({
            input: input
        });
    })

    // The custom select list may show up as either a popup or a dialog,
    // depending how much vertical room there is on the screen. If it shows up
    // as a dialog, then the form containing the filter input field must be
    // transferred to the dialog so that the user can continue to use it for
    // filtering list items.
    //
    // After the dialog is closed, the form containing the filter input is
    // transferred back into the popup.
    .on("pagebeforeshow pagehide", "#filter-menu-dialog", function (e) {
        var form = $("#filter-menu-listbox").jqmData("filter-form"),
            placeInDialog = (e.type === "pagebeforeshow"),
            destination = placeInDialog ? $(e.target).find(".ui-content") : $("#filter-menu-listbox");

        form.find("input")

        // Turn off the "inset" option when the filter input is inside a dialog
        // and turn it back on when it is placed back inside the popup, because
        // it looks better that way.
        .textinput("option", "inset", !placeInDialog)
            .end()
            .prependTo(destination);
    });

Answer 1

这是我的工作 JSFiddle:http://jsfiddle.net/asvyY/46/

我删除了以下几行，因为 jqm 自动将 select-tag 转换为 select-menu

$(document).on("pagecreate", "#page1", function(){   
    $(".filter-menu").selectmenu( "refresh", true );
});

listviewcreate 事件的正确语法是:

$( ".selector" ).on( "listviewcreate", function( event ) {} );

在 listviewcreate 事件中，我将 id 更改为类并启动了列表框

listbox = $("<ul class='.filter-menu-listbox'></ul>");

我希望我能帮助你，并为我糟糕的英语感到抱歉:)