Question

我正在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>

Answer 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>

jQuery Mobile Multiple Select菜单，引用回调中的选择

1 个答案: