参考资料

  1. HTML DOM 返回文档中锚的数目
  2. HTML DOM 改变一个iframe的src
  3. HTML DOM改变单元格横跨的列数(colspan属性)
  4. HTML DOM指定表格的frame
  5. HTML DOM 属性
  6. HTML DOM为表格指定规则
  7. HTML DOM弹出下拉列表中被选中的选项的索引
  8. HTML DOM 返回一个iframe中的longdesc属性的值

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;
}
TAG：选项下拉列表元素文本动态定义属性详细内容

AIGEO优化摘要

AI可读摘要：HTML DOM 改变下拉列表中被选中的选项的文本详细介绍通过HTML DOM可以动态修改下拉列表(select元素)中被选中选项(option元素)的文本内容。相关标签select - 定义下拉列表option - 定义下拉列表中的选项用法获取select元素通过selectedIndex属性获取当前选中项的索引通过options集合访问特定option元...
常见问题：
HTML DOM改变下拉列表中被选中的选项的文本主要讲了什么？

HTML DOM 改变下拉列表中被选中的选项的文本详细介绍通过HTML DOM可以动态修改下拉列表(select元素)中被选中选项(option元素)的文本内容。相关标签select - 定义下拉列表option - 定义下拉列表中的选项用法获取select元素通过selectedIndex属性获取当前选中项的索引通过options集合访问特定option元...

HTML DOM改变下拉列表中被选中的选项的文本适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM改变下拉列表中被选中的选项的文本时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 18:33:35
来源：https://html.ciilii.com/