js 点击text 弹出多选框

在JavaScript中，点击文本弹出多选框的功能可以通过以下步骤实现：

基础概念

事件监听：JavaScript可以监听DOM元素上的事件，如点击事件。
DOM操作：通过JavaScript动态创建和修改HTML元素。
多选框（<select>元素）：HTML中的<select>元素用于创建下拉列表，其中multiple属性允许用户选择多个选项。

实现步骤

HTML结构：创建一个文本元素和一个隐藏的多选框。
JavaScript逻辑：监听文本元素的点击事件，显示多选框，并在用户选择后处理结果。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Text to Show Multi-Select</title>
    <style>
        #multiSelectContainer {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <span id="clickableText">Click me to select options</span>
    <div id="multiSelectContainer">
        <select id="multiSelect" multiple>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
            <option value="option4">Option 4</option>
        </select>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const clickableText = document.getElementById('clickableText');
    const multiSelectContainer = document.getElementById('multiSelectContainer');
    const multiSelect = document.getElementById('multiSelect');

    clickableText.addEventListener('click', function(event) {
        event.stopPropagation(); // Prevent event from bubbling up
        multiSelectContainer.style.display = 'block';
        multiSelect.focus();
    });

    multiSelectContainer.addEventListener('click', function(event) {
        event.stopPropagation(); // Prevent the container from closing when clicking inside
    });

    document.addEventListener('click', function() {
        multiSelectContainer.style.display = 'none';
    });

    multiSelect.addEventListener('change', function() {
        const selectedOptions = Array.from(multiSelect.selectedOptions).map(option => option.value);
        console.log('Selected Options:', selectedOptions);
        // You can handle the selected options here, e.g., sending them to a server
    });
});