Question

我正在创建一个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>

Answer 1

这是因为您使用的选择器过于笼统。

在使用$("select option:selected").each(function (i)...的地方，您告诉jQuery选择“select元素中的每个选定选项”，这当然包括单选菜单中的选定选项。

尝试将其更改为以下之一（要么应该正常工作，要么我不确定哪个更快）：

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

第一个版本仅选择名称为multipleChoiceMenu的菜单，第二个版本选择id。两个版本都应该忽略其他菜单，这就是你想要的。

jQuery Mobile：单选选择菜单值干扰多选菜单的处理程序

1 个答案: