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