使用Bootstrap下拉框时，添加列表项后无法重复选中的问题排查

嘿，我帮你找出问题所在了，主要是两个小细节导致已选中过的选项无法再次选中，咱们一步步来看：

问题根源 #

1. 动态元素没绑定点击事件：你一开始用$('#from_coin a').on("click", ...)绑定点击逻辑，但这种方式只能给页面加载时就存在的<a>元素绑定事件。当你把之前选中的选项（比如Cool）动态添加回下拉列表时，新生成的<a>标签根本没这个点击事件，点了自然没反应。
2. :contains选择器不够靠谱：你用文本匹配来移除元素，虽然现在示例里文本都是唯一的，但这种方式很容易出问题——万一以后有选项文本包含相同的片段（比如Cool和CoolX），就会误删元素；而且文本匹配也不如直接用data属性定位精准。

修复后的完整代码 #

我调整了代码，解决了这两个问题，你可以直接用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<div id="from_coin" class="input-group-addon">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="selected_from" data-curfromcoin="Cool">Cool</span>
    <span class="caret"></span>
  </button>
  <ul id="from_drop" class="dropdown-menu">
    <li><a href="#" data-fromcoin="Code">Code</a></li>
    <li><a href="#" data-fromcoin="Bro">Bro</a></li>
  </ul>
</div>

<script>
// 改用事件委托，让动态添加的a标签也能触发点击
$('#from_drop').on("click", "a", function() {
  const $selected = $('#selected_from');
  const currentSelected = $selected.data('curfromcoin');
  const newSelected = $(this).data('fromcoin');

  // 更新选中的显示文本和存储的当前值
  $selected.html(newSelected).data('curfromcoin', newSelected);

  // 把旧选中项加回下拉，先检查是否已经存在，避免重复添加
  if (!$('#from_drop li a[data-fromcoin="' + currentSelected + '"]').length) {
    $("#from_drop").append(`<li><a href="#" data-fromcoin="${currentSelected}">${currentSelected}</a></li>`);
  }

  // 移除当前点击的这个选项（直接找父级li移除，精准又高效）
  $(this).closest('li').remove();
});
</script>

关键修改点说明 #

• 事件委托：把事件绑定到下拉列表的父元素#from_drop上，这样不管以后动态添加多少个<a>标签，点击时都会触发逻辑，完美解决动态元素无响应的问题。
• 精准操作元素：用data-fromcoin属性来检查元素是否存在，避免重复添加相同选项；移除元素时直接通过$(this).closest('li')定位当前点击的选项对应的<li>，比文本匹配靠谱多了。
• 逻辑小优化：加了重复检查，防止同一个选项被多次塞进下拉列表里。

这样改完之后，不管是第一次选的选项，还是之前选中过的，都能正常切换啦～

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