HTML DOM在下拉列表中选择多个选项

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自定义外观