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

Question

我有以下 select :

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>

我期望的是在 select 编辑时删除 SOMETEXT 例如，如果我 select SOMETEXT Car 我应该只得到图片和文本Car.

Answer 1

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

<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/

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

Bootstrap: show a part of the list content when selected

html

css

bootstrap-4

bootstrap-select