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

jQuery Mobile: single choice select menu values interfering with handler for multiple choice menu

本文关键字：菜单 程序 处理 干扰 Mobile 单选 选择 jQuery      更新时间：2023-09-26

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

这是因为您使用的选择器太通用了。

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

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

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

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

相关文章：