动态添加可搜索下拉字段的完整 jQuery 教程-html教程-PHP中文网

动态添加可搜索下拉字段的完整 jQuery 教程

本文详解如何使用事件委托和语义化类名，实现动态克隆带搜索功能的下拉选择组件，解决 id 冲突、事件失效及多字段数据提交等常见问题。

本文详解如何使用事件委托和语义化类名，实现动态克隆带搜索功能的下拉选择组件，解决 id 冲突、事件失效及多字段数据提交等常见问题。

在构建表单时，常需支持“动态添加同类字段”（如多个 Charges），同时每个字段都具备独立的搜索下拉功能。原始代码试图通过 clone() + 动态修改 id（如 chargeSearch1 → chargeSearch2）来实现，但存在三大根本性问题：

ID 重复违反 HTML 规范，导致 document.getElementById 行为不可预测；
静态事件绑定（如 $('#chargeSearch1').on('input', ...)）无法作用于后续克隆元素；
手动维护计数器（count++）增加耦合度与出错风险。

✅ 正确解法是：弃用 ID 依赖，全面采用 class 选择器 + 事件委托（Event Delegation）。jQuery 的 .on() 支持将事件监听器绑定到父容器，并通过选择器过滤目标子元素——无论该子元素是初始存在还是后续动态添加，均能响应事件。

✅ 核心改造要点

1. 移除所有动态 ID，统一使用语义化 class

<!-- ❌ 原始（问题代码） -->
<div id="chargeGroup1" name="charge1">...</div>
<input id="chargeSearch1" class="search-input"><!-- ✅ 优化后（推荐） --><div class="search-dropdown group"> <!-- 移除 id，保留 class -->
  <div class="dropdown-display">...</div>
  <div class="dropdown-content">
    <input type="text" placeholder="Search..." class="search-input"><!-- 统一 class --><ul class="charge-list"></ul>
</div>
</div>

2. 使用事件委托替代静态绑定

// ✅ 正确：绑定到 #chargeGroups，委托给 .search-input
$('#chargeGroups').on('input', '.search-input', function() {
  const value = $(this).val().toLowerCase();
  // 定位当前输入框所属的 dropdown-content 下的 ul > li
  $(this).next('ul').find('li').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  });
});

// ✅ 正确：点击选项时，精准定位其所属的 search-dropdown 实例
$('#chargeGroups').on('click', '.charge-list > li', function(e) {
  const $dropdown = $(e.target).closest('.search-dropdown');
  $dropdown.find('.dropdown-display > span').text($(this).text());
  $dropdown.find('.dropdown-display > input[type=hidden]').val($(this).text());
  $dropdown.find('.dropdown-content').hide();
});

3. 克隆逻辑极简化（无需计数器）

$('#addMore').click(function() {
  // 克隆第一个模板，自动继承全部 class 和结构
  $('#chargeGroups').append($('.search-dropdown:first').clone());
});

⚠️ 注意：.clone() 默认不复制事件监听器，这正是我们依赖事件委托的原因——无需为每个新元素重新绑定。

jQuery 1.12.4
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

4. 动态填充选项列表（避免重复 DOM 操作）

// 预生成 HTML 字符串，提升性能
const myCharges = {
  "this charge": "",
  "second charge": "",
  "third charge": ""
};

let chargeHtml = '';
$.each(myCharges, (key) => {
  chargeHtml += `

${key}

`; }); // 点击展开时，动态注入选项（确保每次都是最新内容） $('#chargeGroups').on('click', '.dropdown-display', function() { const $content = $(this).next('.dropdown-content'); $content.toggle(); $content.find('.charge-list').html(chargeHtml); // 重置列表 });