HTML DOM改变下拉列表中被选中的选项的文本
2025-04-24
16
参考资料
HTML DOM 改变下拉列表中被选中的选项的文本
详细介绍
通过HTML DOM可以动态修改下拉列表(<select>
元素)中被选中选项(<option>
元素)的文本内容。
相关标签
<select>
- 定义下拉列表<option>
- 定义下拉列表中的选项
用法
获取select元素
通过selectedIndex属性获取当前选中项的索引
通过options集合访问特定option元素
修改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; }
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。