Bootstrap Selectpicker添加data-content后data-subtext消失问题求助

我之前也碰到过类似的坑——Bootstrap Selectpicker在同时使用data-content（给选中项加高亮）和data-subtext（显示子文本）时，确实会出现子文本消失的情况。这是因为data-content会完全替换选中项的默认渲染内容，而默认内容里原本包含了data-subtext的展示部分。下面给你几个本地就能实现的解决思路：

思路1：手动在data-content中嵌入子文本 #

既然data-content支持HTML内容，我们可以把主文本和子文本一起写进去，自己控制样式。这样既保留选中项的高亮，又能显示子文本：

<option data-subtext="子文本内容" data-content="主文本 <span style='color:#6c757d; font-size:0.8em;'>子文本内容</span>">主文本</option>

注意：data-subtext还是要保留，这样下拉列表里的选项依然能正常显示子文本；而选中项的内容则通过data-content自定义，同时包含高亮的主文本和子文本。

思路2：通过Selectpicker事件动态修改选中内容 #

放弃使用data-content，转而利用Selectpicker的changed.bs.select事件，在选中项变化时手动拼接高亮内容和子文本：

// 初始化Selectpicker
$('.selectpicker').selectpicker();

// 监听选中变化事件
$('.selectpicker').on('changed.bs.select', function(e, clickedIndex) {
  // 获取当前选中的option元素
  const selectedOpt = $(this).find('option').eq(clickedIndex);
  const mainText = selectedOpt.text();
  const subText = selectedOpt.data('subtext');
  
  // 自定义选中项的HTML，主文本高亮，子文本用灰色小字
  const customTitle = `<span style='color:#0d6efd; font-weight:600;'>${mainText}</span> <span style='color:#6c757d; font-size:0.8em;'>${subText}</span>`;
  
  // 更新选中项的显示标题
  $(this).selectpicker('setTitle', customTitle);
});

这种方法更灵活，还能根据不同选项设置不同的高亮样式，完全避开data-content和data-subtext的冲突。

思路3：修改Selectpicker源码（适合有源码权限的场景） #

如果你本地有Bootstrap Selectpicker的源码文件，可以直接修改它的选中项渲染逻辑，让data-content和data-subtext共存：
找到源码中处理选中项标题的部分（通常在renderTitle或类似函数里），原本的代码可能是这样的：

var title = $option.data('content') || $option.text();

修改为：

var title = $option.data('content') || $option.text();
var subtext = $option.data('subtext');
// 如果存在子文本，就追加到标题后面
if (subtext) {
  title += ` <span class='text-muted small'>${subtext}</span>`;
}

这样设置data-content时，会自动把子文本追加到后面，无需手动重复编写。不过要注意，修改源码后要测试兼容性，后续升级版本时需要重新同步修改。

另外补充一点：确保你本地引入的Bootstrap和Selectpicker版本匹配，有些旧版本的兼容性问题更明显，尝试升级到较新的稳定版（比如Selectpicker 1.14.0+）可能也能直接解决这个冲突。

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