参考资料

1. HTML DOM 改变一个包含在iframe中的文档的背景颜色
2. HTML DOM获得下拉列表的选项数量
3. HTML DOM document.write() 方法
4. HTML DOM 返回一个button所属表的ID 实例
5. HTML DOM 返回一个iframe中的name属性的值
6. HTML DOM 返回文档中表单数目
7. HTML DOM添加表格行中的单元格
8. HTML DOM 返回image的替代文本

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。