动态下拉菜单jQuery实现方法

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《动态过滤下拉菜单选项 jQuery实现》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

本文介绍如何使用 jQuery 实现：当用户在输入框中输入文本时，自动禁用下拉菜单（`<select>`）中文字内容完全相同的 `` 项，避免重复选择。</select>

在表单交互设计中，常需防止用户在输入框和下拉菜单中重复提交相同值（例如“New”既手动输入又从下拉中选中）。jQuery 提供了简洁高效的解决方案：监听输入框的 keyup 和 change 事件，实时比对并动态禁用匹配的下拉选项。

✅ 核心实现逻辑

• 绑定 .typeVal 输入框的 keyup（按键松开）与 change（值变更）事件；
• 获取当前输入值（$(this).val()）；
• 遍历 #select2 option，通过 .prop("disabled", callback) 设置禁用状态；
• 回调函数中使用 $(this).text() == $val 进行精确文本匹配（注意：区分大小写，且忽略前后空格）。

? 完整可运行示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

&lt;input type=&quot;text&quot; class=&quot;typeVal&quot; placeholder=&quot;输入如 &apos;New&apos; 或 &apos;OLD&apos;&quot; /&gt;

&lt;select class=&quot;form-control&quot; id=&quot;select2&quot;&gt;
  <option value="1">New</option>
  <option value="2">OLD</option>
  <option value="3">Pending</option>
  <option value="4">Draft</option>
&lt;/select&gt;

$('.typeVal').on('keyup change', function() {
  const inputText = $.trim($(this).val()); // 去除首尾空格，提升鲁棒性
  $('#select2 option').prop('disabled', function() {
    return $.trim($(this).text()) === inputText;
  });
});

⚠️ 注意事项与优化建议

• 大小写敏感："new" ≠ "New"。如需忽略大小写，可改为 $(this).text().toLowerCase() === inputText.toLowerCase()；
• 空值处理：输入为空时，所有选项应恢复启用——上述代码已天然支持（空字符串不匹配任何非空选项）；
• 性能考虑：对于超大下拉列表（>100 项），可添加防抖（debounce）避免高频触发；
• 无障碍兼容：禁用选项仍可被屏幕阅读器读出，若需彻底移除语义干扰，建议改用 remove() 或 hide() + data-* 标记，但需同步管理状态；
• 多输入框场景：若页面存在多个 .typeVal，且共用同一下拉，需确保逻辑能正确响应任一输入源。

该方案轻量、兼容性强（支持 jQuery 1.7+），适用于表单校验、动态筛选、防重复录入等多种业务场景。

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