如何将原生select的通知与CSS操作映射到对应Select2组件？

我来帮你搞定这两个Select2使用中的常见问题，直接上解决方案：

问题1：将通知重定向到Select2组件 #

Select2初始化后会把原生的<select>元素隐藏（设置为display: none），转而渲染一套自己的DOM结构来替代。所以你直接针对原生select调用$.notify肯定没用，得找到Select2生成的实际可见的容器元素。

有两种可靠的方式获取这个容器：

1. 利用Select2官方API获取容器（推荐，版本迭代更稳定）：

// 获取Select2实例对应的容器元素
const select2Container = $("#myInputFieldID").data("select2").$container;
// 将通知目标替换为这个容器
$.notify(select2Container, "myNotification", {
  position: "top right",
  autoHideDelay: 2000
});

2. 通过DOM相邻关系查找（适合不想依赖API的场景）：
   Select2的容器会紧跟在原生select后面，带有select2-container类，所以可以这样定位：

const select2Container = $("#myInputFieldID").next(".select2-container");
$.notify(select2Container, "myNotification", {
  position: "top right",
  autoHideDelay: 2000
});

问题2：修改Select2组件的CSS样式 #

原生select被隐藏后，修改它的CSS根本不会显示出来，必须作用到Select2渲染的可见元素上。比如你要修改背景色，Select2的选择框对应类是select2-selection，操作方式如下：

1. 用API定位选择框元素：

const select2Selection = $("#myInputFieldID").data("select2").$selection;
select2Selection.css("background-color", "red");

2. 通过DOM查找定位：

$("#myInputFieldID").next(".select2-container").find(".select2-selection")
  .css("background-color", "red");

如果要修改下拉菜单样式，对应的类是select2-dropdown，方法类似。另外更推荐用自定义CSS类替代行内样式，维护性更好：

.custom-red-bg .select2-selection {
  background-color: red !important;
}

然后给Select2容器添加类：

$("#myInputFieldID").next(".select2-container").addClass("custom-red-bg");

这里用!important是为了覆盖Select2默认样式的优先级，确保自定义样式生效。

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