0

我正在创建一个 jQuery Mobile 页面，它有两个选择菜单，一个是多选，另一个是单选。多选菜单设置为触发处理函数，该函数循环通过菜单中的选定值。问题是每次触发处理程序时，单选菜单中的第一个值如何包含在循环中（如果您实现下面的代码，可以看到这一点）。

如果有人可以提出解决此问题的方法，将不胜感激。

<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[name=multipleChoiceMenu] option:selected").each(function (i)...
$("#multipleChoiceMenu option:selected").each(function (i)...

第一个版本只选择名为 multipleChoiceMenu 的菜单，第二个版本按 id 选择。两个版本都应该忽略另一个菜单，这是您想要的。

于 2012-06-15T00:15:34.393 回答