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

星杰小哥_6345

发布时间：2026-11-01 09:04:06

693人浏览过

来源于php中文网

原创

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

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

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

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

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

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

jQuery 1.12.4

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

下载

✅ 核心改造要点

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() 默认不复制事件监听器，这正是我们依赖事件委托的原因——无需为每个新元素重新绑定。

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

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

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

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

? 完整可运行示例（精简版）

<form id="inmateInfo">
  <div id="chargeGroups">
    <label>Charges: </label>
    <div class="search-dropdown group">
      <div class="dropdown-display">
        <span>Select Charge</span>
        <input name="chargehide" type="hidden">
      </div>
      <div class="dropdown-content">
        <input type="text" placeholder="Search..." class="search-input">
        <ul class="charge-list"></ul>
      </div>
    </div>
  </div>
  <button type="button" id="addMore">Add Charge</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
const myCharges = {"this charge": "", "second charge": "", "third charge": ""};
const chargeHtml = Object.keys(myCharges).map(k => `<li>${k}</li>`).join('');

$(function() {
  // 添加新字段
  $('#addMore').click(() => {
    $('#chargeGroups').append($('.search-dropdown:first').clone());
  });

  // 展开下拉菜单并填充选项
  $('#chargeGroups').on('click', '.dropdown-display', function() {
    const $content = $(this).next('.dropdown-content');
    $content.toggle();
    $content.find('.charge-list').html(chargeHtml);
  });

  // 搜索过滤（事件委托）
  $('#chargeGroups').on('input', '.search-input', function() {
    const value = $(this).val().toLowerCase();
    $(this).next('.charge-list').find('li').filter((i, el) => {
      $(el).toggle($(el).text().toLowerCase().indexOf(value) > -1);
    });
  });

  // 选择选项（事件委托）
  $('#chargeGroups').on('click', '.charge-list > li', function() {
    const $group = $(this).closest('.search-dropdown');
    $group.find('.dropdown-display > span').text($(this).text());
    $group.find('.dropdown-display > input').val($(this).text());
    $group.find('.dropdown-content').hide();
  });

  // 点击外部关闭下拉
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.search-dropdown').length) {
      $('.dropdown-content').hide();
    }
  });
});
</script>