参考资料

1. HTML DOM 返回图像映射某个区域的替代文字实例
2. HTML DOM 给image加上border
3. HTML DOM为表格创建一个标题
4. HTML DOM 重置表单
5. HTML DOM一个单元格的innerHTML
6. HTML DOM 返回image的name
7. HTML DOM将下拉列表变成多行列表
8. HTML DOM获得下拉列表的选项数量

HTML DOM改变下拉列表中被选中的选项的文本

HTML DOM 改变下拉列表中被选中的选项的文本

详细介绍

通过HTML DOM可以动态修改下拉列表(<select>元素)中被选中选项(<option>元素)的文本内容。

相关标签

• <select> - 定义下拉列表

• <option> - 定义下拉列表中的选项

用法

1. 获取select元素

2. 通过selectedIndex属性获取当前选中项的索引

3. 通过options集合访问特定option元素

4. 修改option的text属性或innerHTML

实例

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
  // 获取select元素
  const select = document.getElementById("mySelect");
  
  // 修改当前选中项的文本
  select.options[select.selectedIndex].text = "New Text";
  
  // 或者使用innerHTML
  select.options[select.selectedIndex].innerHTML = "New Text";
</script>

功能

• 动态更新下拉列表选项的显示文本

• 不改变选项的value值

• 即时反映在用户界面上

CSS扩展

可以结合CSS为修改后的选项添加样式：

option:checked {
  color: red;
  font-weight: bold;
}

select option {
  background-color: #f0f0f0;
}