参考资料

1. HTML DOM 返回一个iframe中的name属性的值
2. HTML DOM 用指定的Name弹出元素的数量实例
3. HTML DOM 被按下的键盘键的keycode？
4. HTML DOM 返回和设置链接的href属性实例
5. HTML DOM 返回文档的完整的URL实例
6. HTML DOM 返回页面上所有相对URL的基URL 实例
7. HTML DOM单元格内容水平对齐
8. HTML DOM 返回一个表单的name 实例

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