Bootstrap 5多选下拉框添加全选显示功能的实现方法

核心修改点 #

• 修正下拉选项的生成逻辑，给<option>添加value属性，避免文本空格导致的ID匹配错误
• 在change事件中优先判断两种特殊场景：未选中任何选项 或 选中了ALL选项，触发时直接显示所有元素
• 其他场景下，先隐藏所有元素，再仅显示选中的对应元素

修改后的完整代码 #

HTML代码

<select id="select" placeholder="Choose Select" class="selectpicker" multiple></select>
<div class="container">
    <div id="all" class="items">ALL</div>
    <div id="1" class="items">Div_1</div>
    <div id="2" class="items">Div_2</div>
    <div id="3" class="items">Div_3</div>
    <div id="4" class="items">Div_4</div>
    <div id="5" class="items">Div_5</div>
    <div id="6" class="items">Div_6</div>
</div>

JavaScript代码

var select = document.getElementById('select');
var elems = document.querySelectorAll('.items');

var obj = {};
var filtered = [].filter.call(elems, function (el) {
    if (!obj[el.id]) {
        obj[el.id] = true;
        return true;
    } else {
        return false;
    }
});
// 修正option生成，添加value属性并优化显示文本
var selectOpt = filtered.map(function (el) {
    el.style.display = 'block';
    return `<option value="${el.id}">${el.id === 'all' ? 'ALL' : `Div_${el.id}`}</option>`;
});
select.innerHTML = selectOpt.join('');

select.addEventListener('change', function () {
    // 获取所有选中的选项值
    const selectedOptions = Array.from(this.selectedOptions).map(opt => opt.value);
    const hasAll = selectedOptions.includes('all');
    const hasNoSelection = selectedOptions.length === 0;

    if (hasAll || hasNoSelection) {
        // 显示所有div元素
        elems.forEach(el => el.style.display = 'block');
        return;
    }

    // 常规场景：先隐藏所有元素，再显示选中项对应的元素
    elems.forEach(el => el.style.display = 'none');
    selectedOptions.forEach(id => {
        const targetElem = document.getElementById(id);
        if (targetElem) targetElem.style.display = 'block';
    });
});

代码说明 #

1. 选项生成优化：给每个<option>设置value为对应div的ID，同时优化选项文本显示（ALL显示为ALL，其他显示为Div_X），彻底解决原代码中因文本空格导致的ID匹配失效问题。
2. 特殊场景处理：通过selectedOptions获取所有选中值，先判断是否选中ALL或无选中项，直接显示全部元素，逻辑简洁直接。
3. 常规场景逻辑：先统一隐藏所有元素，再遍历选中值显示对应元素，避免原代码中部分元素可能残留显示状态的问题，逻辑更严谨。

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