参考资料

1. HTML DOM单元格内容水平对齐
2. HTML DOM 返回一个表单中所有元素的value 实例
3. HTML DOM 返回和设置链接的href属性实例
4. HTML DOM 方法
5. HTML DOM 返回图像映射的某个区域的shape 实例
6. HTML DOM 创建一个链接指向一个低分辨率的image
7. HTML DOM document.write() 方法
8. HTML DOM获得下拉列表的选项数量

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