0

2つの選択メニューがあるjQueryMobileページを作成しています。1つは複数選択、もう1つは単一選択です。複数選択メニューは、メニューで選択された値をループするハンドラー関数をトリガーするように設定されています。問題は、ハンドラーがトリガーされるたびに、単一選択メニューの最初の値がループに含まれる方法です（これは、以下のコードを実装するとわかります）。

誰かがこの問題の解決策を提案することができれば、それは大いにありがたいです。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
    />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#multipleChoiceMenu").on("change", {
                testdata: "test"
            }, multipleChoiceSelectHandler);

            function multipleChoiceSelectHandler(e) {
                navigationFilterGate = 0;
                $("select option:selected").each(function (i) {
                    var optionValue = $(this).val();
                    alert("loop " + i + " val " + optionValue);
                });
            };
        });
    </script>
</head>

<body>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <label for="select-choice-custom">Single Choice Menu</label>
            <select select name="singleChoiceMenu" id="singleChoiceMenu"
            data-native-menu="false">
                <option value="Menu1 Value1">Menu1 Value1</option>
                <option value="Menu1 Value2">Menu1 Value2</option>
                <option value="Menu1 Value3">Menu1 Value3</option>
            </select>
            <label for="select-choice-0" class="select">Multiple Choice Menu</label>
            <select name="multipleChoiceMenu" id="multipleChoiceMenu"
            multiple="multiple" data-native-menu="false">
                <option value="Menu2 Value1">Menu2 Value1</option>
                <option value="Menu2 Value2">Menu2 Value2</option>
                <option value="Menu2 Value3">Menu2 Value3</option>
            </select>
        </div>
    </div>
</body>

4

1 に答える 1

0

使用しているセレクターが一般的すぎるためです。

を使用する$("select option:selected").each(function (i)...場合は、jQuery に「select 要素内で選択されたすべてのオプション」を選択するように指示しています。これには、もちろん単一選択メニューで選択されたオプションが含まれます。

それを次のいずれかに変更してみてください（どちらも正常に機能するはずですが、どちらが速いかわかりません）：

$("select[name=multipleChoiceMenu] option:selected").each(function (i)...
$("#multipleChoiceMenu option:selected").each(function (i)...

最初のバージョンは multipleChoiceMenu という名前のメニューのみを選択し、2 番目のバージョンは ID で選択します。どちらのバージョンも、他のメニューを無視する必要があります。

于 2012-06-15T00:15:34.393 に答える