下拉选项选中后图标消失（标签值动态加载）

这个问题我之前也碰到过！核心就是你更新按钮文本的时候，不小心把图标所在的DOM元素也一起替换掉了对吧？别慌，咱们换个结构思路就能搞定～

核心思路：分离静态图标与动态文本 #

不要把图标和文本混在一起当成一个整体去替换，而是把按钮拆成静态图标区域和动态文本区域两个独立部分，更新时只操作文本区域，图标就会一直保留啦。

具体实现步骤 #

1. 重构Bootstrap按钮的HTML结构

把图标和文本放在各自的容器里，比如用<i>放图标，<span>放动态文本：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    <!-- 静态图标：这里用Bootstrap Icons举例，你可以换成自己的图标 -->
    <i class="bi bi-funnel-fill me-2"></i>
    <!-- 动态文本区域：专门用来更新内容 -->
    <span class="btn-dynamic-text">请选择筛选条件</span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="filterDropdown">
    <li><a class="dropdown-item" data-target="最新发布" href="#">最新发布</a></li>
    <li><a class="dropdown-item" data-target="热门内容" href="#">热门内容</a></li>
    <li><a class="dropdown-item" data-target="我的收藏" href="#">我的收藏</a></li>
  </ul>
</div>

2. 编写文本更新逻辑（只操作文本区域）

不管你是用原生JS还是jQuery，监听下拉选项的点击事件后，只更新btn-dynamic-text这个span的内容，完全碰不到图标元素：

原生JavaScript版本：

// 获取所有下拉选项和文本节点
const dropdownItems = document.querySelectorAll('.dropdown-item');
const dynamicText = document.querySelector('.btn-dynamic-text');

dropdownItems.forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    // 这里模拟从外部源获取值，你替换成实际的请求逻辑（比如fetch/AJAX）
    const selectedText = item.getAttribute('data-target');
    // 只更新文本区域！
    dynamicText.textContent = selectedText;
  });
});

jQuery版本：

$('.dropdown-item').on('click', function(e) {
  e.preventDefault();
  // 模拟外部接口获取值
  const targetValue = $(this).data('target');
  // 仅更新文本节点
  $('.btn-dynamic-text').text(targetValue);
});

3. 可选：微调图标与文本的样式

如果图标和文本对齐有问题，加几行CSS调整间距即可：

.btn .bi {
  margin-right: 0.5rem; /* 图标和文本之间的间距 */
}

为什么之前的方法不行？ #

你说的「通过类将图标添加到div导致永久改变样式」，本质是把图标和文本绑定成了一个样式单元，而直接替换按钮innerHTML的操作会把整个按钮内容清空重写，自然就把图标删掉了。拆分结构后，静态图标不受动态更新影响，完美解决问题～

内容的提问来源于stack exchange，提问作者Tony