HTML下拉选择框change事件失效问题排查求助

我在表单内设置了一个select下拉选择框，期望通过它的选中值联动修改另一个select下拉框，但当前change/input事件无法触发。已确认元素ID唯一、脚本位于表单下方且能正常获取该select元素，请问可能的原因是什么？

相关代码 #

HTML结构 #

<div id="ecmodal" class="modal">
  <span onclick="document.getElementById('ecmodal').style.display='none'" class="close" title="Close Modal">&times;</span>
  <form id="ecForm" class="modal-content" action="/edit-chapter">
    <div class="container">
      <h1>Edit Chapter</h1>
      <p>Please fill in this form to edit a chapter.</p>
      <hr>

      <input id="inputusername3" type="hidden" name="uname" value="NOTHING" />
      <input id="inputpass3" type="hidden" name="psw" value="NOTHING" />

      <label for="ebooks2"><b>Book Name</b></label>
      <select name="ebooks2" id="ebooks2" form="ecForm" required></select>

      <label for="echapters"><b>Chapter Name</b></label>
      <select name="echapters" id="echapters" form="ecForm" required></select>

      <label for="thumbnail"><b>Chapter Thumbnail</b></label>
      <input type="text" placeholder="Edit Chapter Thumbnail" name="thumbnail" autocomplete="off" required />

      <label for="intro"><b>Chapter Intro</b></label>
      <textarea rows="3" cols="50" name="intro" form="ecForm" required></textarea>

      <label for="credits"><b>Chapter Credits</b></label>
      <textarea rows="3" cols="50" name="credits" form="ecForm" required></textarea>

      <label for="content"><b>Chapter Content</b></label>
      <textarea rows="15" cols="100" name="content" form="ecForm" required></textarea>
      <p>For italicized text use *text* for bold use **text**</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('ecmodal').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Edit Chapter</button>
      </div>
    </div>
  </form>
</div>

事件处理脚本 #

alert('onload');
let select = document.getElementById("ebooks2");
console.log(select)
document.getElementById('ebooks2').addEventListener('change', function () {
  alert('Hello');
});

select.addEventListener("input", async function () {
  alert("Change")
  if (select.selectedIndex !== -1) {
    // An option has been selected
    var selectedOption = select.options[select.selectedIndex];
    console.log("Selected option:", selectedOption.value);

    let response = await fetch(`https://novels-production.up.railway.app/data/profileBooks/${selectedOption.value}`);
    let json = await response.json();
    console.log(json)
    if (json) {
      var options = json.chapters.map(v => {
        return {
          "text": v.name,
          "value": v.name
        }
      });

      var selectChaptersBox = document.getElementById('echapters');

      for (var i = 0, l = options.length; i < l; i++) {
        var option = options[i];
        selectChaptersBox.options.add(new Option(option.text, option.value, option.selected));
      }

      alert("This is a test.");
    }
  } else {
    // No option has been selected
    console.log("Please select an option");
  }
});

可能的原因及修复方案 #

1. 冗余的form属性导致表单关联异常 #

你的两个select元素已经位于ecForm表单内部，却额外添加了form="ecForm"属性。虽然HTML规范允许这种写法，但部分浏览器可能因此出现表单元素关联逻辑异常，间接阻止事件触发。

修复：移除两个select标签上的form属性：

<select name="ebooks2" id="ebooks2" required></select>
<select name="echapters" id="echapters" required></select>

2. 重复事件绑定与兼容性问题 #

你同时绑定了change和input事件，而input事件在部分旧浏览器中对select元素的支持不够稳定，且重复绑定容易导致逻辑混乱。

修复：统一使用change事件处理选择变更，并移除冗余绑定：

alert('onload');
const select = document.getElementById("ebooks2");
console.log(select);

select.addEventListener('change', async function () {
  alert('Hello');
  if (select.selectedIndex !== -1) {
    const selectedOption = select.options[select.selectedIndex];
    console.log("Selected option:", selectedOption.value);

    try {
      const response = await fetch(`https://novels-production.up.railway.app/data/profileBooks/${selectedOption.value}`);
      const json = await response.json();
      console.log(json);
      
      if (json?.chapters) {
        const selectChaptersBox = document.getElementById('echapters');
        // 先清空原有选项，避免重复添加
        selectChaptersBox.innerHTML = '';
        json.chapters.forEach(v => {
          selectChaptersBox.options.add(new Option(v.name, v.name));
        });
        alert("章节列表已更新");
      }
    } catch (error) {
      console.error('请求失败:', error);
      alert('加载章节列表失败，请检查网络');
    }
  } else {
    console.log("请选择一个书籍");
  }
});

3. 模态框DOM渲染问题 #

如果模态框初始状态为display:none，后续通过JS显示时，部分场景下可能出现元素重新渲染导致原有事件绑定失效。

修复：使用事件委托绑定到模态框容器，确保事件始终有效：

// 事件委托方式绑定
document.getElementById('ecmodal').addEventListener('change', async function (e) {
  if (e.target.id === 'ebooks2') {
    // 后续逻辑和上面一致
  }
});

4. 动态填充选项的潜在问题 #

如果ebooks2的选项是通过其他脚本动态添加的，确保添加选项时没有强制设置选中状态但未触发事件（比如直接修改selectedIndex而未手动触发change事件）。

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