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

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 个解决方案

解决方案1
0 已采纳

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

问题描述

1 个解决方案

解决方案1 0 已采纳

解决方案1
0 已采纳