我太懂你遇到的这个痛点了——Selectric组件会把原生的<select>元素隐藏掉，用它自己生成的一套DOM结构来模拟下拉框，所以你直接给原生<option>加类或者样式，根本不会作用到页面上显示的元素上。下面给你两个靠谱的解决思路：

方法一：利用原生选项的属性匹配生成的DOM元素 #

首先，修改你动态添加选项的代码，不要重新初始化Selectric，而是用refresh方法更新组件（重新初始化会重复生成DOM，反而出问题），同时给原生选项加个标识：

// 动态添加带标识的选项
$('#slctSubPurpose').append($('<option>', {
  value: 'view more',
  text: 'View More',
  // 给原生option加自定义类，方便后续定位
  class: 'view-more-option'
}));
// 刷新Selectric，让它识别新添加的选项
$('#slctSubPurpose').selectric('refresh');

然后，针对Selectric生成的DOM结构写CSS。Selectric会把下拉选项转换成.selectric-items容器里的<li>元素，并且每个<li>会同步原生<option>的value到data-value属性，我们可以用这个属性来精准定位：

/* 下拉展开后，修改View More选项的样式 */
.selectric-items li[data-value="view more"] {
  color: #2563eb;
  font-weight: 600;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

/* 如果需要修改选中后顶部显示的样式 */
.selectric .label[data-value="view more"] {
  color: #2563eb;
  font-weight: 600;
}

方法二：通过Selectric的回调函数动态添加样式 #

如果你需要更灵活的控制，可以利用Selectric的onOpen回调，在下拉框展开时给目标选项添加样式：

// 初始化Selectric的时候配置回调
$('#slctSubPurpose').selectric({
  onOpen: function(element) {
    // 找到对应的生成元素并加类
    $(this.items).find('li[data-value="view more"]').addClass('view-more-style');
  }
});

// 动态添加选项后记得刷新
$('#slctSubPurpose').append($('<option>', {
  value: 'view more',
  text: 'View More'
})).selectric('refresh');

对应的CSS类：

.view-more-style {
  color: #2563eb;
  font-weight: 600;
  border-top: 1px solid #e5e7eb;
}

关键注意点 #

• 绝对不要在动态添加选项后重新调用$('#slctSubPurpose').selectric();，这会重复初始化组件，导致DOM结构混乱，应该用selectric('refresh')来更新。
• Selectric生成的DOM结构里，下拉选项的<li>和原生<option>是一一对应的，通过data-value或者索引都能定位，但data-value是最可靠的方式。

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