求助：向HTML Select/Option列表添加文本框内容时选项瞬间消失

兄弟我太懂这种刚加完内容就消失的崩溃感了！你遇到的这个问题99%是表单默认提交行为在搞鬼，咱们马上给你搞定。

问题根源 #

如果你的按钮/添加操作是放在<form>标签里的，浏览器默认会把<button>当成提交按钮，点击时自动触发表单提交——页面一刷新，刚添加的选项自然就没了！

解决方案（按优先级来） #

1. 最简单：给按钮设置type="button" #

把你的按钮从默认的提交类型改成普通按钮，直接切断表单提交触发：

<!-- 原来的按钮可能是这样 -->
<button onclick="addOption()">添加选项</button>

<!-- 修改成这样 -->
<button type="button" onclick="addOption()">添加选项</button>

2. 在JS函数里阻止默认事件 #

如果不想改按钮类型，就在你的添加函数里手动阻止表单提交的默认行为：

// 修改你的addOption函数，接收事件参数
function addOption(event) {
  // 第一步先阻止默认提交行为
  event.preventDefault();

  // 下面是你原来的添加逻辑（示例）
  const inputText = document.getElementById("你的输入框ID").value;
  const selectEl = document.getElementById("你的Select列表ID");

  // 创建新选项
  const newOption = document.createElement("option");
  newOption.textContent = inputText;
  newOption.value = inputText; // 可选：设置选项的value值

  // 添加到Select列表
  selectEl.appendChild(newOption);

  // 可选：清空输入框
  document.getElementById("你的输入框ID").value = "";
}

注意要给按钮的onclick传事件参数：

<button onclick="addOption(event)">添加选项</button>

3. 检查有没有其他刷新页面的操作 #

如果你的页面里没有<form>标签，那要排查下JS代码里有没有不小心写了location.reload()、window.location.href这类会刷新页面的语句。

额外检查点 #

• 打开浏览器控制台（F12），看看有没有报错信息，确认你的JS能正确获取到输入框和Select元素
• 确认创建<option>的逻辑没有语法错误

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