参考资料

  1. HTML DOM 改变一个iframe的src
  2. HTML DOM 返回文档的完整的URL实例
  3. HTML DOM 返回图像映射某个区域的替代文字实例
  4. HTML DOM 返回一个iframe中的name属性的值
  5. HTML DOM获得有下拉列表的表单的ID
  6. HTML DOM 改变image的src
  7. HTML DOM 创建一个链接指向一个低分辨率的image
  8. HTML DOM一个行的innerHTML

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