参考资料

1. HTML DOM 返回一个button的name 实例
2. HTML DOM 修改 HTML 内容
3. HTML DOM删除下拉列表中的选项
4. HTML DOM 当点击完button不可用 实例
5. HTML DOM 返回文档中锚的数目
6. HTML DOM 属性
7. HTML DOM改变单元格的内容
8. HTML DOM 返回一个客户端图像映射的usemap的值

HTML DOM 下拉列表多选功能

介绍

HTML DOM 提供了<select>元素的多选功能，通过设置multiple属性，用户可以在下拉列表中选择多个选项。

标签和属性

<select multiple size="n" name="selectName" id="selectId">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

• multiple: 启用多选功能

• size: 指定可见的选项行数

• name: 表单提交时的字段名

• id: 元素的唯一标识符

用法

1. 按住Ctrl键(Windows)或Command键(Mac)点击可选择多个不连续的选项

2. 按住Shift键点击可选择连续的多个选项

JavaScript 操作

// 获取选中的值
const select = document.getElementById('selectId');
const selectedValues = Array.from(select.selectedOptions).map(option => option.value);

// 设置选中状态
document.querySelector('option[value="value2"]').selected = true;

实例

<select multiple size="4" name="colors" id="colorSelect">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

<button onclick="showSelected()">显示选中项</button>

<script>
function showSelected() {
  const select = document.getElementById('colorSelect');
  const selected = Array.from(select.selectedOptions).map(opt => opt.value);
  alert('选中的颜色: ' + selected.join(', '));
}
</script>

CSS 扩展

/* 基本样式 */
select[multiple] {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

/* 选项样式 */
select[multiple] option {
  padding: 5px;
}

/* 选中项样式 */
select[multiple] option:checked {
  background-color: #007bff;
  color: white;
}

/* 悬停效果 */
select[multiple] option:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

/* 禁用样式 */
select[multiple]:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

功能特点

1. 允许用户从列表中选择一个或多个选项

2. 适合选项数量较多但空间有限的场景

3. 可通过JavaScript动态添加/删除选项

4. 支持表单提交时自动包含所有选中的值

5. 可通过CSS自定义外观