使用 JavaScript 显示多选下拉框对应的元素
在网页开发中，多选下拉框是非常常见的交互组件，用户可以通过它同时选择多个选项。很多时候我们需要获取用户选中的选项，并将对应的内容展示在页面上，方便用户确认选择结果。下面我们就通过具体的代码示例，讲解如何实现这个功能。
基础 HTML 结构搭建
首先我们需要先创建一个多选下拉框，以及用于展示选中结果的容器。这里要注意，多选下拉框需要添加 multiple 属性，才能让用户进行多选操作，同时给下拉框和结果容器分别设置唯一的 id，方便后续通过 JavaScript 获取元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选下拉框选中结果展示</title>
<style>
.container {
width: 500px;
margin: 50px auto;
font-family: "微软雅黑", sans-serif;
}
.select-box {
width: 200px;
height: 120px;
margin-bottom: 20px;
padding: 8px;
font-size: 14px;
}
.result-box {
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
min-height: 40px;
background-color: #f9f9f9;
}
.result-box p {
margin: 0;
color: #666;
}
.selected-item {
display: inline-block;
padding: 4px 10px;
margin: 4px;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
border-radius: 3px;
color: #1890ff;
}
</style>
</head>
<body>
<div class="container">
<h3>请选择你喜欢的编程语言</h3>
<!-- multiple 属性开启多选，按住 Ctrl/Command 可多选 -->
<select id="languageSelect" class="select-box" multiple>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Go">Go</option>
<option value="C++">C++</option>
<option value="PHP">PHP</option>
</select>
<div>
<h4>你选择的结果是：</h4>
<div id="resultContainer" class="result-box">
<p>暂未选择任何选项</p>
</div>
</div>
</div>
</body>
</html>上面的代码里，我们给下拉框设置了 multiple 属性，用户可以通过按住 Ctrl（Windows/Linux）或者 Command（Mac）键点击选项实现多选，也可以按住 Shift 键选择连续区间的多个选项。结果容器默认显示了“暂未选择任何选项”的提示。
JavaScript 逻辑实现
接下来我们需要编写 JavaScript 代码，监听下拉框的选择变化事件，当用户修改选中项时，实时获取所有选中的选项，并将结果渲染到结果容器中。
// 等待页面DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
// 获取多选下拉框元素
const selectElement = document.getElementById('languageSelect');
// 获取结果展示容器元素
const resultContainer = document.getElementById('resultContainer');
// 定义处理选中结果的函数
function updateSelectedResult() {
// 获取所有选中的选项，返回的是HTMLCollection，转为数组方便处理
const selectedOptions = Array.from(selectElement.selectedOptions);
// 如果没有选中任何选项，显示默认提示
if (selectedOptions.length === 0) {
resultContainer.innerHTML = '<p>暂未选择任何选项</p>';
return;
}
// 清空结果容器原有内容
resultContainer.innerHTML = '';
// 遍历所有选中的选项，创建对应的展示元素
selectedOptions.forEach(option => {
const item = document.createElement('span');
item.className = 'selected-item';
item.textContent = option.value; // 这里也可以取 option.textContent，根据需求选择
resultContainer.appendChild(item);
});
}
// 监听下拉框的change事件，选择变化时触发更新逻辑
selectElement.addEventListener('change', updateSelectedResult);
// 初始加载时先执行一次，确保初始状态正确
updateSelectedResult();
});这里的核心逻辑是监听下拉框的 change 事件，每次用户修改选中项都会触发 updateSelectedResult 函数。函数内部通过 selectElement.selectedOptions 直接获取所有选中的选项，这个属性是原生下拉框自带的特性，不需要我们自己遍历所有 option 判断是否被选中，减少了代码量。
拿到选中的选项数组后，我们先判断长度是否为0，如果为空就显示默认提示；如果不为空，就遍历数组，为每个选中的选项创建一个带样式的 span 元素，添加到结果容器中，最终展示出所有选中的内容。
功能扩展建议
上面的代码已经实现了基础的多选结果展示功能，如果有更复杂的需求，还可以做以下扩展：
- 增加“全选”“清空”按钮，点击按钮可以一次性选中所有选项或者清空所有选中项，只需要操作下拉框的
selected属性即可实现。 - 给展示的选中项添加删除按钮，点击可以单独取消某个选项的选中状态，需要同步修改下拉框中对应
option的selected属性。 - 如果是动态生成的下拉框选项，只需要在选项渲染完成后，重新绑定
change事件或者执行一次结果更新函数即可。
整体实现并不复杂，核心是利用原生下拉框的 selectedOptions 属性快速获取选中项，再配合 DOM 操作完成结果渲染，兼容性也比较好，主流浏览器都支持该特性。