javascript - 中的 互斥？

转载 作者：行者123 更新时间：2023-11-30 17:00:09 24 4

我需要将单选和多选的功能组合到一个控件中。具体来说，我有多种选择。第一个与其他的互斥。所以，如果我选择第一个，就需要取消选中所有其他的。如果选择了其中一个，则必须取消选中第一个(如果已选择)。其他选项应该不会相互影响。

<select id="myGroup" data-native-menu="false" multiple="multiple" >
    <option value=""  >Select Group(s)</option>
    <option value="-1" selected="selected" >I am alone</option>
    <option value="1"  >I am not alone 1</option>
    <option value="2"  >I am not alone 2</option>
    <option value="3"  >I am not alone 3</option>
</select>

我安装了一个 onchange() 处理程序。所以，我知道什么时候做出选择。但我似乎无法分辨刚刚选择了哪个选项。因此，在上面的示例中，如果用户选择选项 3，则 $(this).val() 变为 -1,3。我怎么知道刚刚选中的是“3”？

到目前为止，我唯一想到的就是保留一个选定选项的数组，然后在选择一个新选项时对数组进行比较。

$('select[id=myGroup]').change(function() {
    // At this point, I know the sum total of what's been selectec.
    // But I don't know which one just got added to the list.
    // I want logic that says:
    //  if -1 just got added, then unselect all the others
    //  if something else was just added, make sure that -1 is not selected
    var selected = $(this).val();
    alert(JSON.stringify(selected));
});

有没有更好的办法？

最佳答案

你只需要为第一个选项保持状态，而不是所有的:

var firstOption = $("#myGroup > option[value=-1]");
var firstSelectedBefore = firstOption.prop("selected");

$("#myGroup").on("change", function(event) {
    if (firstOption.prop("selected") && this.selectedOptions.length > 1) {
        if (firstSelectedBefore) { // non-first option just selected
            firstOption.prop("selected", false);
        } else { // first option just selected
            $(this).find("option:not([value=-1])").prop("selected", false);
        }
    }
    firstSelectedBefore = firstOption.prop("selected");
});

关于javascript - <select> 中的 <option> 互斥？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29041660/

24 4 0

文章推荐： javascript - 文本长度限制在我的 instafeed 模板中不起作用

文章推荐： C#/ODP.Net : MERGE INTO - How to get numer of affected Rows?

文章推荐： c# - 如何将 C# 程序集资源嵌入同一个程序集中？

文章推荐： javascript - 不加滤镜虚化背景

• javascript - `var options = options || {}` 和 `options || (options = {})` 之间的区别

  我经常使用 var options = options || {} 作为默认为空对象的方式。它通常用于初始化选项对象，以防它未在函数调用的参数中传递。 问题是我在几个地方(博客文章、源代码)读到opt

• rust - 比赛背后的魔力:没有对`＆std::option::Option 的实现== std::option::Option <_>

  我是Python中Rust的新手。这是我学习Rust的第四天。 在第一个问题Type casting for Option type之后，我有一个跟语法match和所有权概念有关的后续问题。 首先，我

• swift - 如何修复此闭包语法错误 : aka 'Optional<(Optional, Bool, Optional>, Optional) -> ()>'

  我正在学习 Ray Wenderlich。我遇到了闭包语法错误。我想知道 Xcode 提示是什么意思？ Xcode 报告如下: /Users/.../FlickrPhotosViewControlle

• python - 单击命令行界面 : Make options required if other optional option is unset

  使用 Python 编写命令行界面 (CLI) 时 click library , 是否可以定义例如三个选项，其中仅当第一个(可选)未设置时才需要第二个和第三个选项？ 我的用例是一个登录系统，它允许我

• java - Optional> 用于存储库层中的空列表返回 Optional.empty 。如何更改它以返回 Optional[[]]

  我有一个这样的 JPA 查询。 PersonRepository.java public Optional> findByStatus(int status); 人员服务.java System.ou

• scala - 有没有更惯用的方法从 Option[IO[Option[A]] 获取 IO[Option[A]] 然后使用序列和映射连接？

  我遇到了很多地方，我有类似的东西 def f(s: String): Option[Long] = ... def g(l: Long): IO[Option[Wibble]] = ... val a

• scala - 展平 Future[Option[Option[T]]] 的 Option 部分

  我有一个results: List[Future[Option[T]]]其中包含(并行)计算。 我想获得第一个非None尽快出结果，或者返回None如果所有计算都返回 None . 目前，我正在这样做

• reactjs - typescript 错误 TS2322 : Type 'Option' is not assignable to type '(string & Option) | (number & Option) | (readonly string[] & Option)'

  我正在尝试加载一个简单的 Listbox组件来自 @headlessui/react . 选择.tsx type Option = { id: number name: string

• scala - `Future[Option[Future[Option[X]]]]` 变为 `Future[Option[X]]`

  如何将Future[Option[Future[Option[X]]]]转换为Future[Option[X]]？ 如果它是 TraversableOnce 而不是 Option 我会使用 Futur

• typescript - Option 或 Optional 类型 (Option) 在 TypeScript 中有意义吗？

  Haskell、Rust 等语言提供了一个 Maybe 或 Option 类型。即使在 Java 中，也有一个 Optional 现在打字。 为简单起见，我将在剩下的问题中将此类型称为“选项类型”。

• sql-server - 如何避免在 SQL 中存储像 这样的 XML ？

  当我尝试在 SQL 中存储一个 XML 而不是一个空元素时，SQL 只是更改它并仅使用一个元素标签来存储它。例如，要存储的 XML 是: ROGER 然后Sql存起来就好了

• c++ - 使用 Argo 命令行解析器 : Unknown option is not returned when option is behind a exsiting option

  使用这个非常好的命令行解析器 Argo(仅 header C++ 库)我遇到了一个小问题。请参阅:https://github.com/phforest/Argo Argo 返回:'Error: Un

• scala - 与 Option.isEmpty 和 Option.get 相比，使用 Option.map 有什么优势？

  我是来自 Java 背景的 Scala 新手，目前对考虑 Option[T] 的最佳实践感到困惑. 我觉得用 Option.map只是更实用和美观，但这不是说服其他人的好理由。有时， isEmpty

• java - 如何以函数式风格多次写入 "if optional is empty, call next method returning optional, if not return this non-empty optional"？

  这个问题在这里已经有了答案: Chaining Optionals in Java 8 (9 个回答) Optional orElse Optional in Java (6 个回答) Functio

• java - 关于效率: .filter(Optional::isPresent).map(Optional::get) 不是比 .flatmap(Optional::stream) 更好吗？

  Optional::stream如果存在，则返回一个包含该值的 Stream，否则返回一个空流。所以对于 Stream> optionals , optionals.flatMap(Optional:

• c - 如何在 printf 菜单 ("==>") 上移动 printf 指示器 ("option 1\n option 2\n option 3")？

  我使用箭头键作为输入，在 printf 菜单中上下移动 printf 箭头(“==>”)。 我正在使用一个函数来计算箭头应该在的位置，并使用 switch case 和 printf("\n==>")

• javascript - 非常简单的Javascript。这是什么 : "options = options || {};"?

  这个问题在这里已经有了答案: What does the construct x = x || y mean? (12 个答案) 关闭 9 年前。 如我的问题标题所述，我最近偶然发现了这个变量声明:

• javascript - 'options || (options = {})' 是做什么的？

  这个问题在这里已经有了答案: BackboneJS: What is options || (options = {}); in Backbone source code (1 个回答) 关闭 8

• python - pyparsing Optional() & Optional() 允许重复

  我有这个简单的语法: word = Word(alphanums + '_') with_stmt = Suppress('with') + OneOrMore(Group(word('key') +

• css - 选择 标签内的内容

  使用 Cucumber 和 SitePrism 编写测试，我在页面上有以下 HTML... Select a Status Active Product Inactive Prod

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
• JMeter 在响应断言中使用 span 标签的问题
• html - 在 :hover and :active? 上具有不同效果的 CSS 动画
• html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

• 高效打造跨平台桌面应用：Electron加载服务器端JS
• 火山引擎数智平台：高性能ChatBI的技术解读和落地实践
• SSD-KD：天翼云&清华出品，最新无原始数据的蒸馏研究|CVPR'24
• 免弹窗、预授权，默认界面扫码能力打造系统级扫码体验
• 使用WakeLockAPI：保持设备唤醒的最佳实践
• .NET开源工业级移动端仓库管理系统
• Canvas简历编辑器-Monorepo+Rspack工程实践
• .netcore8使用JWT鉴权（附当前源码）
• NuxtKit中的布局管理
• Excel国产化替换新方案

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com