根据用户输入动态增删下拉选项框选项的问题求助

我来帮你搞定这个问题～你之前的核心问题是：当用select.remove(i)删掉SMS选项后，这个元素就彻底从DOM里消失了，后面想直接add它根本找不到对应的元素。得提前把这个选项的信息存好，需要的时候重新创建（或者复用）它才行。

问题分析 #

• 当输入以01开头时，你成功移除了SMS选项，但这个操作是永久性删除DOM元素
• 当输入改为07开头时，你尝试add但没成功，因为原来的SMS选项已经不存在了，得重新创建这个选项节点

修改后的完整代码 #

JavaScript代码

// 提前创建并保存SMS选项的DOM节点，方便后续复用
const smsOption = document.createElement('option');
smsOption.value = 'SMS';
smsOption.textContent = 'Send updates by SMS';

function deselectcheckbox() { 
  const telInput = document.getElementById("tel_num");
  const select = document.getElementById('send_updates');
  // 检查下拉列表中是否已存在SMS选项
  const existingSmsOption = select.querySelector('option[value="SMS"]');

  if (telInput.value.startsWith("01")) { 
    // 仅当SMS选项存在时才移除，避免重复操作报错
    if (existingSmsOption) {
      select.remove(existingSmsOption);
    }
  } else { 
    // 仅当SMS选项不存在时才添加，避免重复添加
    if (!existingSmsOption) {
      // 找到Email选项，把SMS插在它前面，保持原有的下拉顺序
      const emailOption = select.querySelector('option[value="Email"]');
      select.insertBefore(smsOption, emailOption);
    }
  } 
}

HTML代码

<table> 
  <tr> 
    <td>Contact Number</td> 
    <td> 
      <!-- 不用传值，函数内部直接获取输入框值更清晰 -->
      <input type="text" name="tel_num" id="tel_num" value="" onkeyup="deselectcheckbox()">
    </td> 
  </tr> 
  <tr> 
    <td> 
      <select name="send_updates" id="send_updates" required> 
        <option value="" selected>Please Select....</option> 
        <option value="SMS">Send updates by SMS</option> 
        <option value="Email">Send updates by Email</option> 
      </select> 
    </td> 
  </tr> 
</table>

关键优化点 #

1. 复用选项节点：提前创建smsOption变量，避免每次恢复都重复创建DOM元素
2. 存在性检查：用querySelector判断SMS选项是否存在，防止重复移除/添加导致的报错
3. 保持顺序：用insertBefore把SMS选项插在Email前面，和初始的下拉列表顺序一致
4. 事件优化：函数内部直接获取输入框元素，比传参更简洁（也可以换成input事件，能捕获粘贴、输入法输入等所有输入场景）

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