Bootstrap：选中时显示部分列表内容答案

【问题标题】：Bootstrap: show a part of the list content when selectedBootstrap：选中时显示部分列表内容
【发布时间】：2020-10-27 03:15:24
【问题描述】：

我有以下选择：

jQuery('.my-select').selectpicker();

.list_img{
    width: 30px;
    height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true">
    <option data-content="<img class='list_img' src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'>SOMETEXT Car">SOMETEXT Car</option>
    <option data-content="<img class='list_img' src='https://cdn.pixabay.com/photo/2015/03/05/01/46/sailing-ship-659758_960_720.jpg'>SOMETEXT Boat">SOMETEXT Boat</option>
</select>

我期望的是，在选中 SOMETEXT 时删除它，例如，如果我选择 SOMETEXT Car，我应该只得到图片和文本 Car。

【问题讨论】：

你有没有尝试过完成这个？
是的，通过使用title属性但它不会在里面呈现html

标签： html css bootstrap-4 bootstrap-select

【解决方案1】：

我的想法是在选择和加载时替换文本，但为此，您必须更改下拉选项的布局：

<img class='list_img' 
    src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'>
  SOMETEXT Car
/>

到

<img class='list_img' 
    src='https://cdn.pixabay.com/photo/2016/04/01/12/16/car-1300629_960_720.png'
/>
<span class="displayed-text">
  SOMETEXT Car
</span>

这样下拉切换器上有一个占位符，您可以用它替换文本。

另外，将选项值设置为要替换的文本可能是个好主意，例如：

<option data-content='...' value="car">
  SOMETEXT Car
</option>
<option data-content='...' value="Boat">
  SOMETEXT Boat
</option>

那么您需要连接 loaded 和 changed 事件来更新文本：

$(function() {
    let $select = $('.my-select').selectpicker();
    
    $select.on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // $(this) is the actual <select />
        updateDropdownTitle($(this));
    });
    
    $select.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // $(this) is the actual <select />
        updateDropdownTitle($(this));
    });
    
    function updateDropdownTitle($select) {
        let $dropdownToggler = $select.parent().find('.dropdown-toggle'),
            $title = $dropdownToggler.find('.filter-option-inner-inner'),
            selectedValue = $select.val();
        
        // Update the text to the value
        $dropdownToggler.prop('title', selectedValue);

        // Update the displayed-text span's text to the value
        $('.displayed-text', $title).text(selectedValue);   
    }
});

演示： https://jsfiddle.net/davidliang2008/avhdzgf5/42/

【讨论】：