如何动态修改select下拉框option显示文本？运行报null错误如何解决？

代码问题排查 #

• 问题1：<option>标签不支持嵌套<span>等子元素，浏览器解析HTML时会自动移除你写在option内部的<span>标签，导致#select1、#select2这两个ID对应的元素根本不存在，所以DOM查询返回null，赋值时报错。
• 问题2：p2对象的displaySelect属性选择器写错了，仍使用了#select1，就算span没被删除，给p2赋值也只会修改第一个选项的内容。
• 问题3：form表单内的button默认是submit类型，点击后会触发表单提交刷新页面，就算前面问题修复，你也看不到修改效果就会被页面重置。

修复后的代码 #

HTML部分

<form action="#">
  <input type="text" id="p1Name">
  <input type="text" id="p2Name">
  <button id="start">Start</button>
</form>
<label for="selected">Select Player</label>
<select name="" id="selected">
  <!-- 直接给option加ID，删除嵌套的span标签 -->
  <option value="p1" id="select1">Player 1</option>
  <option value="p2" id="select2">Player 2</option>
</select>

JavaScript部分

const p1 = {
  displaySelect: document.querySelector('#select1')
}
// 修正p2的选择器为#select2
const p2 = {
  displaySelect: document.querySelector('#select2')
}

const startButton = document.querySelector('#start');
startButton.addEventListener('click', (e) => {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  let nameOne = document.getElementById('p1Name').value.trim();
  let nameTwo = document.getElementById('p2Name').value.trim();
  // 可选：增加空值判断，避免用户没输入就提交显示空内容
  if(nameOne) p1.displaySelect.textContent = nameOne;
  if(nameTwo) p2.displaySelect.textContent = nameTwo;
})

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