实现两个独立且样式一致的bootstrap-select下拉选择器

我来帮你搞定这个需求！你需要两个完全独立、共用相同逻辑但互不影响的bootstrap-select颜色选择器，同时要保留指定的hover效果，下面是调整后的完整代码和关键改动说明：

修改后的完整代码 #

HTML 部分 #

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select-color-1">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>
<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select-color-2">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

CSS 部分（实现自定义hover效果） #

/* 覆盖bootstrap-select默认下拉项hover样式 */
.bootstrap-select .dropdown-menu li a:hover {
  color: inherit !important; /* 保留原有文本颜色 */
  background-color: #f0f0f0 !important; /* 浅灰色背景 */
}

/* 确保下拉列表项的颜色始终生效 */
.bootstrap-select .dropdown-menu li a span.text {
  color: inherit !important;
}

JavaScript 部分 #

$(document).ready(function() {
  // 批量初始化所有pickerSelectClass类的选择器
  $(".pickerSelectClass").selectpicker();

  // 初始化每个选择器的默认颜色
  $(".pickerSelectClass").each(function() {
    const $select = $(this);
    const initialColor = $select.val();
    // 找到当前选择器对应的filter-option元素
    $select.closest('.selectContainer').find('.filter-option').css("color", initialColor);
  });

  // 为每个选择器绑定change事件，独立更新颜色
  $(".pickerSelectClass").on('change', function(){
    const $select = $(this);
    const selectedColor = $select.val();
    // 仅更新当前选择器对应的显示元素
    $select.closest('.selectContainer').find('.filter-option').css('color', selectedColor);
    // 刷新当前选择器确保样式同步
    $select.selectpicker("refresh");
  });
});

关键改动说明 #

• 修复重复ID问题：把原来重复的id="select"改成了唯一的select-color-1和select-color-2，ID在页面中必须唯一，否则JavaScript选择器会只作用于第一个元素。
• 独立的状态控制：通过closest('.selectContainer')定位当前选择器的父容器，再找到对应的.filter-option元素，这样每个选择器的颜色修改只会影响自身，不会干扰另一个。
• 批量初始化与事件绑定：使用类选择器.pickerSelectClass批量处理两个选择器，避免重复代码，同时保证每个实例的逻辑独立。
• 自定义hover样式：通过CSS覆盖bootstrap-select的默认hover样式，实现“鼠标悬停时文本颜色不变，背景仅略微变灰”的需求，同时确保下拉项的颜色始终继承option的设置。

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