如何修复无法向多选selectpicker下拉按钮追加选项的问题

我来帮你排查下这个问题，其实是两个关键细节没处理到位：重复引入的依赖导致冲突，以及事件绑定的对象不对，导致你的动态添加逻辑根本没触发。下面一步步给你解决：

1. 先清理重复的Bootstrap依赖 #

你的HTML里重复引入了Bootstrap 4.0.0和4.1.1的CSS/JS文件，这会导致样式和脚本冲突，是很多组件异常的常见原因。我们只保留一套适配bootstrap-select 1.13.1的依赖（推荐保留4.1.1版本），修改后的HTML如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- 只保留Bootstrap 4.1.1的CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
<!-- bootstrap-select的CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> 
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<!-- d3和Chart.js保留 -->
<script src="https://d3js.org/d3.v6.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script> 
<!-- Bootstrap 4.1.1的JS bundle（已包含popper） -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> 
<!-- bootstrap-select的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> 
</head> 
<body> 
<form class="simple_form form-inline"> 
<div class="form-group select required"> 
<label for="basic-url" class="form-label">Product</label> 
<select class="selectpicker required form-control" multiple id="select1"> 
<option value="All">All</option> 
</select> 
</div> 
</form>
<!-- 删掉重复的popper和Bootstrap 4.0.0的JS -->
</body>

2. 修正事件绑定逻辑 #

你之前把点击事件绑定在了原生的<select>元素上，但bootstrap-select会把原生select隐藏，生成自己的按钮和下拉DOM结构。用户实际点击的是生成的按钮，不是原生select，所以你的one('click')逻辑根本没触发！

我们改用bootstrap-select官方提供的show.bs.select事件，这个事件会在下拉框即将展开时触发，而且用one绑定确保只执行一次添加逻辑：

$(document).ready(function() { 
  var unique = ['A', 'B', 'C']; 
  // 绑定到selectpicker的show事件，而非原生select的click事件
  $('#select1').one('show.bs.select', function() { 
    // 动态添加选项
    for (var i = 0; i < unique.length; i++) { 
      $(this).append(`<option value="${unique[i]}">${unique[i]}</option>`); 
    } 
    // 针对当前select实例调用refresh，更精准
    $(this).selectpicker('refresh'); 
  }); 
}); 

为什么这样修改能解决问题？ #

• 清理重复依赖：避免不同版本Bootstrap之间的样式/脚本冲突，确保bootstrap-select能正常工作。
• 绑定正确的事件：show.bs.select是bootstrap-select专门提供的事件，能准确捕捉到用户展开下拉框的动作，而非绑定在被隐藏的原生元素上。
• 精准调用refresh：直接对当前操作的select实例执行refresh，确保新添加的选项被组件识别并渲染到下拉列表中。

现在测试一下：点击下拉按钮，第一次展开时会自动添加A/B/C三个选项，并且能正常显示和选择。

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