多选框选中值无需点击按钮即时在页面展示的技术问询

嘿，我帮你调整了代码，现在只要你选中或者取消选中多选框里的选项，选中的值就会立刻在页面上展示出来，不用再依赖点击提交按钮啦！

下面是修改后的完整代码：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected Values</title>
    <script>
        function listboxresult() {
            let selectedValues = "";
            const selectElement = document.getElementById("sel");
            
            // 遍历所有选项，收集选中的值
            for (let i = 0; i < selectElement.options.length; i++) {
                if (selectElement.options[i].selected) {
                    selectedValues += selectElement.options[i].value + " ";
                }
            }
            
            // 更新展示区域的内容，处理全取消选中的情况
            document.getElementById("result1").innerHTML = selectedValues.trim() || "没有选中任何选项";
        }
    </script>
</head>
<body>
    <h2>Select fav color</h2>
    <!-- 给select添加onchange事件，选项变化时自动触发函数 -->
    <select name="sel" id="sel" multiple="multiple" onchange="listboxresult();">
        <option value="" disabled selected>Select your option</option>
        <option value="Black">Black</option>
        <option value="Red">Red</option>
        <option value="White">White</option>
        <option value="Blue">Blue</option>
        <option value="Green">Green</option>
    </select>
    <div id="result"></div>
    <br>
    <!-- 按钮可留可删，不影响实时更新功能 -->
    <div>
        <input type="button" id="but1" value="Click" onclick="listboxresult();">
    </div>
    <br>
    <div id="result1"></div>
</body>
</html>

主要修改点： #

• 给<select>元素添加了onchange="listboxresult()"事件：只要选项的选中状态发生变化（选中或取消选中），就会自动调用函数，实现实时更新。
• 优化了listboxresult函数：
  • 去掉了原来错误的spanresult.value写法（<div>元素没有value属性，之前的代码逻辑无效），改用字符串变量直接收集选中值。
  • 增加了空值处理：当所有选项都被取消选中时，页面会显示“没有选中任何选项”，避免展示区域空白。
• 保留了原按钮（可选删除）：如果需要保留手动触发更新的功能，按钮可以继续留着，不会影响实时更新的效果。

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