带有多选和突出显示关键字的自定义下拉选择框（静态）

标签：选项 function 多选自定义元素关键字事件 document option

带有多选和突出显示关键字的自定义下拉选择框：
Custom Dropdown Select Box with Multiple Selection and Highlighting Keywords：
不使用select元素，用div、ul、li、span元素实现带有多选和突出显示关键字的自定义下拉选择框。
完整控件包含三部分：

第一步用div模拟select选择框，ul+li模拟option选项，并用span标记关键词；
第二步CSS渲染展示效果；
第三步用原生JavaScript脚本实现点击选择，多选，取消选择，获取选中项结果（数组）；

1，HTML模拟选择框

核心代码如下：

<!-- 自定义下拉选择框 html 开始 -->
<div class="custom-select">
    <div class="selected-options">
        <span class="placeholder">请选择...</span>
    </div>
    <ul class="options-list">
        <li class="option" data-value="option1">选项1 <span class="highlight">关键词</span></li>
        <li class="option" data-value="option2">选项2</li>
        <li class="option" data-value="option3">这个选项3 也有<span class="highlight">关键词</span></li>
        <li class="option" data-value="option4">选项4</li>
    </ul>
</div>
<!-- 自定义下拉选择框 html 结束 -->

搭配上CSS样式渲染就可以看到静态的选择框。接下来还学通过JavaScript脚本实现功能逻辑。

2，JavaScript脚本实现功能逻辑

我们知道JavaScript是浏览器前端脚本语言，要实现网页动态效果是很合适的。根据面向对象编程思想，首先我们得拿到要处理的对象，即HTML标签（DOM元素），例如：

var customSelect = document.querySelector('.custom-select');
var optionsList = document.querySelector('.options-list');
var selectedOptions = document.querySelector('.selected-options');
var options = document.querySelectorAll('.option');

接着我们对标签元素绑定事件驱动，例如：

监听DOMContentLoaded触发事件

DOMContentLoaded 是一个在网页的文档结构（DOM）加载完成后触发的事件，而不需要等待所有的外部资源（如图片、样式表、脚本等）加载完成。这个事件对于执行依赖于DOM解析完成后的JavaScript代码非常有用，因为它允许你尽早地开始执行代码，而不必等待整个页面完全加载。
在JavaScript中，你可以使用 addEventListener 方法来监听 DOMContentLoaded 事件。以下是一个简单的示例：

// 网页的文档结构（DOM）加载完成后触发的事件
document.addEventListener('DOMContentLoaded', function (event) {
    event.stopPropagation(); // 阻止事件冒泡到外层元素
    console.log('DOM已加载完成！');  
    // 在这里执行你的代码 
}

    在这个示例中，当 DOMContentLoaded 事件触发时，会执行一个匿名函数，该函数在控制台输出一条消息。你可以在这个函数内部执行任何需要在DOM加载完成后运行的JavaScript代码。
    需要注意的是，DOMContentLoaded 事件只会在文档的初始加载时触发一次。如果你希望在页面加载完成后执行某些操作，并且这些操作需要在每次页面加载时都执行，你可能需要考虑使用其他方法，如 load 事件或 jQuery 的 $(document).ready() 方法（如果你在使用jQuery）。
    另外，如果你正在编写一个库或框架，并且需要确保在DOM加载完成之前不执行任何操作，那么监听 DOMContentLoaded 事件可能是一个很好的选择。这样可以确保你的代码在DOM结构可用时立即执行，而不必等待其他资源加载完成。

监听click触发事件

在JavaScript中，click事件是一个常用的鼠标事件，它在用户点击某个元素（例如，按钮、链接、图片等）时触发。你可以使用addEventListener方法来监听click事件，并在事件触发时执行相应的代码。
通过监听click事件，可以实现各种交互效果，例如按钮点击、链接跳转、图片放大等。可以通过addEventListener方法将click事件绑定到指定的元素上，并在事件触发时执行相应的操作。
以下是一个三种常见的简单示例代码，演示了如何使用click事件：

// 选项标签元素绑定click触发事件
document.querySelectorAll('.option').addEventListener('click', function (event) {
    event.stopPropagation(); // 阻止事件冒泡到外层元素
	console.log('选项标签元素被点击了！');
});

// 实时创建的标签元素绑定click触发事件
var span = document.createElement('span');
span.addEventListener('click', function (event) {
    event.stopPropagation(); // 阻止事件冒泡到外层元素
	console.log('实时创建的标签元素被点击了！');
});

// 点击选项以外的地方触发事件
document.addEventListener('click', function (e) {
    e.stopPropagation(); // 阻止事件冒泡到外层元素
    console.log('选项以外的地方被点击了！');
});

需要注意的是，同一个元素可以添加多个同类型的事件监听器，它们会按照添加的顺序依次执行。此外，你可以使用removeEventListener方法来移除之前添加的事件监听器。
这部分更详细可以参考：JavaScript操作addEventListener监听触发事件

数组的遍历、插入、删除操作

在JavaScript中，数组是一种常见的数据结构，可以包含多个元素，并且可以进行遍历、插入和删除等操作。

这部分更详细可以参考：JavaScript操作数组

调整标签元素展示样式

在JavaScript中，classList.toggle 是一个DOM（Document Object Model）元素的方法，用于切换元素的类名。如果元素已经包含指定的类名，则该类名会被移除；如果元素不包含指定的类名，则该类名会被添加。这个方法在动态修改元素的样式时非常有用。

这部分更详细可以参考：JavaScript操作DOM元素的classList

完整代码

完整代码（DropdownSelectBox.html 单个网页文件）：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="MobileOptimized" content="240">
    <meta name="applicable-device" content="mobile">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">

    <meta name="theme-color" content="#3c80d4" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#9cc8ff" media="(prefers-color-scheme: dark)">

    <title>带有多选和突出显示关键字的自定义下拉选择框</title>
    <meta name="Description" content="带有多选和突出显示关键字的自定义下拉选择框：Custom Dropdown Select Box with Multiple Selection and Highlighting Keywords">
    <meta name="author" content="熊仔其人">

    <!-- CSS样式 -->
    <style type="text/css">
        /* 自定义下拉选择框 CSS 开始 */
        .custom-select {
            position: relative;
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 1px;
        }

        .selected-options {
            padding: 1px;
            cursor: pointer;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .selected-options .selectedOptions-icon-cross {
            background-color: #f8f9fa;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 1px;
        }

        .selected-options .selectedOptions-icon-cross::after {
            /* content: '\2717'; */
            content: '\2715';
        }

        .placeholder {
            color: #999;
        }

        .options-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
            /* 默认隐藏选项列表 */
        }

        .option {
            padding: 5px;
            cursor: pointer;
        }

        .option:hover {
            background-color: #f2f2f2;
        }

        .option.selected {
            background-color: #e0e0e0;
        }

        .option.selected::after {
            /* content: '\221A'; */
            content: '\2713';
            color: #007bff;
            margin-left: 5px;
        }

        .highlight {
            color: red;
            /* 关键词标红 */
        }

        /* 显示选项列表 */
        .custom-select.active .options-list {
            display: block;
        }
        /* 自定义下拉选择框 CSS 结束 */
    </style>

</head>

<body>
    带有多选和突出显示关键字的自定义下拉选择框：
    Custom Dropdown Select Box with Multiple Selection and Highlighting Keywords:
    <hr />
    
    <!-- 自定义下拉选择框 html 开始 -->
    <div class="custom-select">
        <div class="selected-options">
            <span class="placeholder">请选择...</span>
        </div>
        <ul class="options-list">
            <li class="option" data-value="option1">选项1 <span class="highlight">关键词</span></li>
            <li class="option" data-value="option2">选项2</li>
            <li class="option" data-value="option3">这个选项3 也有<span class="highlight">关键词</span></li>
            <li class="option" data-value="option4">选项4</li>
        </ul>
    </div>
    <!-- 自定义下拉选择框 html 结束 -->

    <!-- 自定义下拉选择框 JS脚本 开始 -->
    <script>
        document.addEventListener('DOMContentLoaded', function (event) {
            event.stopPropagation(); // 阻止事件冒泡到外层元素
            var customSelect = document.querySelector('.custom-select');
            var optionsList = document.querySelector('.options-list');
            var selectedOptions = document.querySelector('.selected-options');
            var options = document.querySelectorAll('.option');

            // 显示/隐藏选项列表  
            selectedOptions.addEventListener('click', function (event) {
                event.stopPropagation(); // 阻止事件冒泡到外层元素
                customSelect.classList.toggle('active');
            });

            // 选项点击事件  
            options.forEach(function (option) {
                option.addEventListener('click', function (event) {
                    event.stopPropagation(); // 阻止事件冒泡到外层元素
                    var isSelected = this.classList.contains('selected');
                    this.classList.toggle('selected', !isSelected);

                    // 更新已选项显示  
                    updateSelectedDisplay();
                });
            });

            // 点击选项以外的地方关闭选项列表  
            document.addEventListener('click', function (e) {
                e.stopPropagation(); // 阻止事件冒泡到外层元素
                if (!customSelect.contains(e.target)) {
                    customSelect.classList.remove('active');
                }
            });

            // 更新已选项的显示  
            function updateSelectedDisplay() {
                var selectedItems = [];
                options.forEach(function (option) {
                    if (option.classList.contains('selected')) {
                        selectedItems.push({ value: option.getAttribute('data-value'), text: option.textContent.trim() });
                    }
                });

                // 清空并重新填充已选项  
                selectedOptions.innerHTML = '';
                if (selectedItems.length === 0) {
                    selectedOptions.appendChild(document.createTextNode('请选择...'));
                } else {
                    selectedItems.forEach(function (item) {
                        var span = document.createElement('span');
                        span.setAttribute('class', 'selectedOptions-icon-cross');
                        span.setAttribute('data-value', item.value);
                        span.textContent = item.text + ' ';
                        span.addEventListener('click', function (event) {
                            event.stopPropagation(); // 阻止事件冒泡到外层元素
                            var itemValue = this.getAttribute('data-value');
                            options.forEach(function (option) {
                                if (option.getAttribute('data-value') == itemValue) {
                                    option.classList.toggle('selected', false);
                                }
                            });

                            // 更新已选项显示  
                            updateSelectedDisplay();
                        });
                        selectedOptions.appendChild(span);
                    });
                }
            }
        });

        // 获取选中项
        function getSelectedItems() {
            var selectedItems = [];
            var selectedOptions = document.querySelectorAll('.custom-select .selected-options .selectedOptions-icon-cross');
            selectedOptions.forEach(function (option) {
                selectedItems.push({ value: option.getAttribute('data-value'), text: option.textContent.trim() });
            });

            return selectedItems;
        }

    </script>
    <!-- 自定义下拉选择框 JS脚本 结束 -->

</body>

</html>

效果

效果展示：

我这里是将可选择项写固定的，在实际项目中可以改成输入关键词，异步方法去后台查询可供选项的列表，绑定到前端该控件，然后就是正常的在项目中动态地使用了。

标签：选项,function,多选,自定义,元素,关键字,事件,document,option
From： https://www.cnblogs.com/xiongzaiqiren/p/18574429