onchange事件在内部脚本与内联脚本中均不生效的原因排查

我来帮你排查一下这个问题，结合你给出的代码，大概率是这几个原因导致的，咱们一步步来解决：

1. 脚本执行时机或作用域问题 #

如果你的<script>标签放在<head>里，或者放在<select>元素之前但没做DOM加载判断，虽然函数定义了，但可能存在作用域冲突，或者浏览器还没解析到select元素就绑定了事件（不过内联onchange其实不存在这个问题，但函数可能被其他代码覆盖）。

解决办法：

• 把脚本移到<body>标签的末尾，确保所有DOM元素加载完成后再执行脚本；
• 或者用DOMContentLoaded事件包裹代码，确保DOM就绪后再绑定事件，同时改用更可靠的addEventListener方式替代内联onchange：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取下拉框元素
  const registerSelect = document.getElementById('registerAs');
  // 绑定change事件
  registerSelect.addEventListener('change', function() {
    alert("show");
  });
});
</script>

2. 默认选项的选中状态问题 #

你的第一个选项value="register as"是默认选中的状态，当用户重复选择这个选项时，onchange事件不会触发——因为选中值没有发生变化。只有当用户从这个选项切换到其他选项时，事件才会触发。

解决办法：
把第一个选项改成提示性的禁用选项，强制用户选择其他选项，这样只要用户选择就会触发事件：

<select name="registerAs" id="registerAs">
  <option value="" disabled selected>register as</option>
  <option value="doctor">doctor</option>
  <option value="patient">patient</option>
  <option value="pharmacy">pharmacy</option>
</select>

如果需要页面加载时就执行一次函数，可以在脚本里手动调用：

// 在DOM就绪后调用一次
document.addEventListener('DOMContentLoaded', function() {
  show();
});

3. 函数名冲突或被覆盖 #

有可能你的页面里其他脚本也定义了名为show的函数，导致你的函数被覆盖，内联调用时找不到正确的函数。

解决办法：
把函数名改成更独特的，比如showRegisterType，避免冲突：

<script>
function showRegisterType() {
  alert("show");
}
</script>
<select name="registerAs" id="registerAs" onchange="showRegisterType()">
  <!-- 选项内容 -->
</select>

完整示例代码 #

这里给你一个可以直接运行的完整示例，结合了上面的优化点：

<!DOCTYPE html>
<html>
<body>
  <select name="registerAs" id="registerAs">
    <option value="" disabled selected>register as</option>
    <option value="doctor">doctor</option>
    <option value="patient">patient</option>
    <option value="pharmacy">pharmacy</option>
  </select>

  <script>
    function showRegisterType() {
      alert("show");
    }

    // 用addEventListener绑定事件（推荐）
    document.addEventListener('DOMContentLoaded', function() {
      const registerSelect = document.getElementById('registerAs');
      registerSelect.addEventListener('change', showRegisterType);
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者maththi siva charan