0

jQuery モバイルで複数選択メニューを実装しています。コールバック関数で選択したすべてのアイテムを参照したいと思います (理想的には、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>

4

1 に答える 1

0

使用しているものと、css が一致しない古いバージョンの JQM から始めます。

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

スクリプトを head 領域に配置し、JQM を使用して「pageinit」イベントを使用する場合にも、次のように実行することをお勧めします。

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

</script>
于 2012-06-17T16:22:52.230 に答える