jQuery Mobile 多选菜单，在回调中引用选择答案

【问题标题】：jQuery Mobile Multiple Select menu, referencing selections in callbackjQuery Mobile 多选菜单，在回调中引用选择
【发布时间】：2012-05-15 08:09:37
【问题描述】：

我在 jQuery mobile 中实现了一个多选菜单。我想在回调函数中引用所有选定的项目（理想情况下，它将由 close 事件触发）。下面说明的实现通常适用于将数据绑定到单个项目菜单的更改处理程序，但它甚至似乎都没有触发。任何帮助将不胜感激。

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js">
        < /script
            <meta http-equiv="Content-Type" content="text/html;
        charset = UTF - 8 "/>
            <meta name="
        viewport " content="
        width = device - width, user - scalable = no " />

</head>

<body onload="
        initialize()">
    <script type="
        text / javascript ">

        $(document).ready(function () {
            $("#selectMenu ").on("change ", {testdata: "test "}, filterSelectHandler);
        }); 

    function filterSelectHandler(e) {
    alert($(": selected ", $(this)));
    }

    </script>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <select name="select-choice-1" id="selectMenu" multiple="multiple" data-native-menu="false">
                <option value="standard">Option 1</option>
                <option value="rush">Option 2</option>
                <option value="express">Option 3</option>
                <option value="overnight">Option 4</option>
            </select>
        </div>
    </div>
    </body>

【问题讨论】：

标签： events jquery-mobile callback select-menu

【解决方案1】：

从您正在使用的旧版 JQM 开始，但 css 不匹配：

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
try this one instead:
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

您包括 3 次 jquery 和不同的版本。只留下这个：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

最好将脚本放在头部区域，并且在使用 JQM 时使用“pageinit”事件，这样：

<script type="text/javascript">
    $(document).on("pageinit", function() {
        $("#selectMenu").on("change", filterSelectHandler); 
        function filterSelectHandler(e) {
            alert($(":selected", $(this)));
        }
    });

</script>

【讨论】：