jQuery级联下拉框禁用重复选项技巧

本文详解如何用 jQuery 实现智能级联下拉框，通过监听选择变化动态禁用其他下拉框中与当前选中值重复的选项，确保多选场景（如分配不同人员给不同角色）中数据唯一性与交互合理性；方案简洁健壮——自动重置禁用状态、精准过滤相同 value、兼容默认选中和空选项，并支持任意数量下拉框无缝扩展，无需插件即可开箱即用，是提升表单体验与数据一致性的高效实践。

本文介绍如何使用 jQuery 动态禁用第二个下拉框中与第一个下拉框当前选中值相同的选项，确保两个下拉框不能选择相同项，提升表单交互合理性与数据一致性。

在构建多级关联表单时，常需避免用户在多个下拉框中重复选择同一选项（例如：为不同角色分配不同人员）。以下是一个简洁、健壮的 jQuery 解决方案，实现「当第一个下拉框（#select2）选定某值后，自动禁用第二个下拉框（#select3）中对应 value 相同的 」。

✅ 核心逻辑说明

• 监听所有 select 元素的 change 事件；
• 每次变更后，先重置所有 的 disabled 状态（设为 false），避免残留禁用；
• 遍历每个下拉框，获取其当前选中值 this.value；
• 对其余下拉框（$('select').not(this)），查找其内部 value 与当前值相等的 ，并设为 disabled: true；
• 最后主动触发一次 .change()，确保页面初始化时即应用默认禁用逻辑（如首项已预选）。

? 完整可运行代码示例

  




  第一人选：
  
    — 请选择 —
    Shiva
    Disha
  

  



  第二人选（自动排除已选）：
  
    — 请选择 —
    Shiva
    Disha
  

⚠️ 注意事项

• ID 唯一性：原问题中两个 使用了相同 ID id="select2"，这违反 HTML 规范，已修正为 #select2 和 #select3；
  空值处理：添加 if (!selectedVal) return 避免空选项（如提示文字 "— 请选择 —"）触发误禁用；
  兼容性：代码基于 jQuery 3.x，若使用旧版（如 2.1.1），请确保 prop() 方法可用（推荐 ≥2.0）；
  扩展建议：如需支持更多下拉框，无需修改逻辑，只需统一添加 class="form-control" 并确保它们被 $('select') 选中即可。

  该方案轻量、无侵入性，无需额外插件，适用于各类表单场景，是实现双向互斥选择的理想实践。

  今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

  相关阅读

  更多>

  • 文章 · java教程   |  2年前  |   微服务 效率提升 功能开发
    提升Java功能开发效率的有力工具：微服务架构
    501 收藏
  • 文章 · java教程   |  2年前  |   java 开发 sdk
    掌握Java海康SDK二次开发的必备技巧
    501 收藏
  • 文章 · java教程   |  2年前  |   java 实现 桶排序
    如何使用java实现桶排序算法
    501 收藏
  • 文章 · java教程   |  2年前  |   实战经验 Java开发 优化开发逻辑
    Java开发实战经验：如何优化开发逻辑
    501 收藏
  • 文章 · java教程   |  2年前  |   java math Max
    如何使用Java中的Math.max()方法比较两个数的大小？
    501 收藏
  最新阅读

  更多>

  • 文章 · java教程   |  3天前  |   Java · Stream · 集合处理 · 订单统计 · 后端教程 · java 订单处理 Stream Collectors 分组汇总
    Java Stream 订单列表处理流程：从过滤、分组到金额汇总
    455 收藏
  • 文章 · java教程   |  3天前  |   hashmap · 集合 · Java教程 · hashCode · equals · java HashMap map equals hashCode 可变key
    Java HashMap key 修改后为什么 get 不到值：从 hashCode 到不可变 key
    474 收藏
  • 文章 · java教程   |  4天前  |   Java教程 · 后端开发 · 接口幂等 · java spring boot 唯一键 接口幂等 Redis防重
    Java 接口幂等设计实战：从请求标识到 Redis 防重和唯一键兜底
    178 收藏
  • 文章 · java教程   |  5天前  |   map · 并发安全 · 缓存设计 · Java教程 · java optional concurrenthashmap computeIfAbsent Map缓存
    Java computeIfAbsent 缓存初始化实战：少写判断、避开空值和并发坑
    236 收藏
  • 文章 · java教程   |  5天前  |   参数校验 · Java教程 · NPE · 空值处理 · 后端排查 · java 空指针异常 参数校验 NPE Objects
    Java 空指针异常排查实战：从日志定位到入口校验和安全映射
    204 收藏
  • 文章 · java教程   |  5天前  |   Java · 集合 · ArrayList · Iterator · removeIf · java iterator ArrayList ConcurrentModificationException removeIf
    Java ArrayList 遍历删除完整流程：从 modCount 到 Iterator.remove 和 removeIf
    410 收藏
  • 文章 · java教程   |  5天前  |   Java · 异步编程 · 后端开发 · CompletableFuture · 接口聚合 · java 结果合并 completablefuture 并行调用 超时兜底
    Java CompletableFuture 多接口聚合完整流程：并行调用、超时兜底和结果合并
    428 收藏
  • 文章 · java教程   |  6天前  |   Java · 线程安全 · DateTimeFormatter · 日期处理 · 并发问题 · java 线程安全 日期格式化 threadlocal SimpleDateFormat DateTimeFormatter
    Java SimpleDateFormat 日期偶发错乱怎么办：从共享实例到线程安全一步步排查
    481 收藏
  • 文章 · java教程   |  1星期前  |   http接口 · httpclient · Java教程 · 接口调试 · 超时处理 · java 接口调用 httpclient 超时控制 状态码 响应体
    Java HttpClient 调接口实战：超时、状态码和响应体这样处理
    224 收藏
  • 文章 · java教程   |  1星期前  |   时间处理 · instant · Java教程 · 时区转换 · DateTimeFormatter · java DateTimeFormatter java.time 时区处理 ZoneId INSTANT
    Java 时间与时区处理实战：Instant、ZoneId 和 DateTimeFormatter 怎么配
    461 收藏
  • 文章 · java教程   |  1星期前  |   Java · Stream · 集合统计 · 分组聚合 · Collectors · java Stream Collectors groupingBy counting summarizingInt
    Java Stream 分组统计实战：groupingBy、counting 和 summarizingInt 怎么用
    478 收藏
  • 文章 · java教程   |  1星期前  |   Java · 文件读取 · 异常处理 · 资源管理 · try-with-resources · java 异常处理 try-with-resources 资源关闭 AutoCloseable 文件流
    Java try-with-resources 资源关闭实战：文件流和目录扫描这样写更稳
    268 收藏
  课程推荐

  更多>

  • 

    前端进阶之JavaScript设计模式

    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

    立即学习 543次学习

  • 

    GO语言核心编程课程

    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

    立即学习 516次学习

  • 

    简单聊聊mysql8与网络通信

    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

    立即学习 500次学习

  • 

    JavaScript正则表达式基础与实战

    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

    立即学习 487次学习

  • 

    从零制作响应式网站—Grid布局

    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

    立即学习 485次学习

  • 首页
  • 阅读
  • 课程
  • AI助手
  • 我的