参考资料

1. HTML DOM 根节点
2. HTML DOM 返回一个锚的名字 实例
3. HTML DOM 返回一个iframe中的name属性的值
4. HTML DOM 返回一个button所属表的ID 实例
5. HTML DOM 返回一个表单target属性的值
6. HTML DOM 重置表单
7. HTML DOM 方法
8. HTML DOM 用指定的Name弹出元素的数量实例

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