Html 引导：选中时显示列表内容的一部分

我有以下选择：

jQuery（'.my select'）.selectpicker（）
.list\u img{
宽度：30px；
高度：30px；
}

短信车
一些文字船
我的想法是在选择和加载时替换文本，但要做到这一点，您必须从以下位置更改下拉选项的布局：


短信车
/>

到


短信车

这样，在下拉开关上就有一个占位符，您可以用它替换文本

另外，最好将选项值设置为要替换的文本，如：


短信车
一些文字船



然后您需要将
加载的
和
更改的
事件连接起来以更新文本：

$（函数（）{
让$select=$（'.my select'）.selectpicker（）；
$select.on（'loaded.bs.select'，函数（e，clickedIndex，isSelected，previousValue）{
//$（这）是实际值
updateDropdownTitle（$（this））；
});
$select.on（'changed.bs.select'，函数（e，clickedIndex，isSelected，previousValue）{
//$（这）是实际值
updateDropdownTitle（$（this））；
});
函数updateDropdownTitle（$select）{
让$dropdownToggler=$select.parent（）.find（'.dropdownToggler'），
$title=$dropdownToggler.find（'.filter option-inner'），
selectedValue=$select.val（）；
//将文本更新为该值
$dropdownToggler.prop（'title'，selectedValue）；
//将显示的文本范围的文本更新为该值
$（'.displatedtext'，$title）.text（selectedValue）；
}
});






演示：
您尝试过实现这一点吗？是的，通过使用title属性，但它不会在内部呈现html