如何使innerHTML插入的select标签显示onchange='javascript:fshowMe(this)'事件？

这问题我之前也碰到过，核心原因是你在拼接字符串的时候错误地使用了+this+，这里的this并不是你以为的<select>元素本身，而是当前回调函数的上下文（大概率是window对象）。当你把它拼进字符串里，最终生成的是类似onchange='javascript:fshowMe([object Window])'的代码，浏览器会认为这是无效的JavaScript，直接把整个onchange属性忽略掉了，所以才会出现事件缺失的情况。

下面给你两种可行的解决方案：

方案1：直接在字符串中写死this #

内联事件里的this本来就指向触发事件的DOM元素，所以你根本不需要动态拼接this变量，直接把"this"写在字符串里就行。同时记得闭合<select>标签，避免DOM解析异常：

if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  document.getElementById("mydiv").innerHTML = "<div class='form-group'><label>Color Option</label> <select name='mycolor' onchange='javascript:fshowMe(this)' id='mycolor' class='form-control input-lg' required> <option value='black'>Black</option></select></div>";
}
return false;

方案2：使用事件监听（推荐） #

现代前端开发更推荐用事件监听代替内联事件，这种方式能更好地分离HTML和JS代码，也避免了字符串拼接的潜在问题。具体步骤是先插入基础HTML，再给生成的select元素绑定事件：

if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  const myDiv = document.getElementById("mydiv");
  // 插入不带内联事件的HTML结构
  myDiv.innerHTML = "<div class='form-group'><label>Color Option</label> <select name='mycolor' id='mycolor' class='form-control input-lg' required> <option value='black'>Black</option></select></div>";
  // 获取生成的select元素
  const colorSelect = myDiv.querySelector("#mycolor");
  // 绑定change事件
  colorSelect.addEventListener("change", function() {
    fshowMe(this);
  });
}
return false;

这种方式不仅解决了你的问题，还让代码更易于维护——后续如果需要修改事件逻辑，直接修改JS部分即可，不用动HTML字符串。

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