参考资料

1. HTML DOM write() 和 writeln()的不同实例
2. HTML DOM 返回文档的标题实例
3. HTML DOM改变单元格横跨的列数(colspan属性)
4. HTML DOM 返回图像映射的某个区域的shape 实例
5. HTML DOM 设置image的hspace和vspace属性
6. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
7. HTML DOM 方法
8. HTML DOM 改变iframe的高度和宽度

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);