如何使用JavaScript修改ul类列表内的选项值

错误原因 #

你当前使用的代码是针对<select>下拉框元素的专属API，options属性仅存在于下拉框元素上，<ul>无序列表没有该属性，因此代码无法生效。

正确实现代码 #

假设你要操作的目标ul的id为option1，要修改第一个li选项的文本值，可使用以下两种常用实现：

// 方案1：直接通过选择器定位目标元素
document.querySelector('ul#option1 li:nth-child(1)').textContent = 'newName';

// 方案2：先获取ul容器再操作子元素
const targetUl = document.getElementById('option1');
// li列表下标从0开始，0对应第一个li元素
targetUl.getElementsByTagName('li')[0].textContent = 'newName';

场景适配说明 #

• 如果你需要定位带特定特征的li，比如包含指定类名、自定义属性，可调整选择器精准匹配，例如修改类名为active的li文本：
  document.querySelector('ul#option1 li.active').textContent = 'newName'
• 如果li内部嵌套了其他元素（比如a标签、span标签），补充对应元素层级即可，例如修改li内a标签的文本：
  document.querySelector('ul#option1 li:nth-child(1) a').textContent = 'newName'

内容的提问来源于stack exchange，提问作者michal_novolin