参考资料

1. HTML DOM为表格创建一个标题
2. HTML DOM 返回文档中第一个锚的 innerHTML
3. HTML DOM 改变image的src
4. HTML DOM 方法
5. HTML DOM添加表格行中的单元格
6. HTML DOM 返回一个button的type 实例
7. HTML DOM 节点列表
8. 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自定义外观

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。