参考资料

1. HTML DOM获得有下拉列表的表单的ID
2. HTML DOM 修改
3. HTML DOM 返回当前的文件和链接的文档之间的关系
4. HTML DOM弹出下拉列表中所有选项
5. HTML DOM 当点击完button不可用 实例
6. HTML DOM 返回一个表单中元素的数量 实例
7. HTML DOM 改变一个iframe的src
8. HTML DOM单元格内容水平对齐

HTML DOM 下拉列表选项

基本介绍

HTML下拉列表通过<select>元素创建，包含多个<option>子元素表示可选项。

主要标签

<select>标签

• 创建下拉列表容器

• 属性：

• id - 唯一标识符

• name - 表单提交时的名称

• multiple - 允许多选

• size - 显示的行数

• disabled - 禁用下拉列表

<option>标签

• 定义下拉列表中的选项

• 属性：

• value - 选项值

• selected - 默认选中

• disabled - 禁用该选项

<optgroup>标签

• 创建选项分组

• 属性：

• label - 分组标题

基本用法

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
</select>

DOM操作实例

获取所有选项

const select = document.getElementById('mySelect');
const options = select.options;

遍历选项

for (let i = 0; i < options.length; i++) {
  console.log(options[i].value, options[i].text);
}

添加新选项

const newOption = new Option('新选项', 'newOption');
select.add(newOption);

删除选项

select.remove(0); // 删除第一个选项

获取选中值

const selectedValue = select.value;
const selectedIndex = select.selectedIndex;

CSS扩展样式

基本样式

select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
}

自定义下拉箭头

select {
  appearance: none;
  background-image: url('arrow-down.png');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

选项样式

option {
  padding: 8px;
  background-color: white;
  color: #333;
}

option:hover {
  background-color: #f0f0f0;
}

option:checked {
  background-color: #e0e0e0;
}

禁用状态样式

select:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

高级功能示例

动态加载选项

fetch('options.json')
  .then(response => response.json())
  .then(data => {
    const select = document.getElementById('mySelect');
    select.innerHTML = ''; // 清空现有选项
    
    data.forEach(item => {
      const option = new Option(item.text, item.value);
      select.add(option);
    });
  });

多选下拉列表

<select id="multiSelect" multiple size="4">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

获取多选值：

const multiSelect = document.getElementById('multiSelect');
const selectedValues = Array.from(multiSelect.selectedOptions)
  .map(option => option.value);

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