JavaScript实现选择器选项切换时动态更改段落文本

嘿，我一眼就发现问题啦——你把onchange事件绑定到<option>标签上了，但**<option>元素根本不会触发onchange事件**哦！这个事件应该绑定在<select>容器本身上，因为只有当整个选择器的选中项发生变化时，才会触发onchange。

另外还有个小细节：你的<p>标签没正确闭合，写成了<p>而不是</p>，虽然浏览器可能会自动修复，但规范写法还是要注意的。

修正方案1：优化成单一函数（更简洁） #

把事件绑定到<select>上，通过选中的value动态更新文本，不用写三个重复的函数：

function updateSelectedText(selectEl) {
  const selectedColor = selectEl.value;
  const displayText = `You Currently Have "${selectedColor.toUpperCase()}" Selected!`;
  document.getElementById("p").innerHTML = displayText;
}

<select onchange="updateSelectedText(this)">
  <option value="red" selected>Red</option> <!-- 加上selected设置默认选中项 -->
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<p id="p">You Currently Have "RED" Selected!</p>

修正方案2：保留你的三个函数（调整事件绑定） #

如果你想继续用原来的三个函数，只需把onchange移到<select>上，再根据选中值调用对应函数：

function selectR() { document.getElementById("p").innerHTML = 'You Currently Have "RED" Selected!'; }
function selectG() { document.getElementById("p").innerHTML = 'You Currently Have "GREEN" Selected!'; }
function selectB() { document.getElementById("p").innerHTML = 'You Currently Have "BLUE" Selected!'; }

function handleSelect(selectEl) {
  switch(selectEl.value) {
    case "red":
      selectR();
      break;
    case "green":
      selectG();
      break;
    case "blue":
      selectB();
      break;
  }
}

<select onchange="handleSelect(this)">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<p id="p">You Currently Have "RED" Selected!</p>

核心原因就是：<option>不是触发onchange的正确元素，所有选择器的变化事件都应该绑定在<select>标签上，这样当用户切换选项时，事件才会被正确触发~

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