JS调用函数时仅单次移除select下拉框默认选项的问题求解

你当前的代码中，移除默认选项的逻辑没有加触发限制，每次添加有效输入值时都会无条件执行lista.options[0] = null删除select的第一个选项：第一次触发时删除的是默认提示项，从第二次触发开始就会误删之前添加的有效选项，不符合仅首次添加时移除默认提示的需求。

只需要给移除默认项的逻辑加上判断条件：仅当valores数组为空（即第一次添加有效输入）时，才执行删除默认提示的操作，后续添加时直接跳过该步骤即可。

修正后完整代码 #

JavaScript 部分 #

let num = document.querySelector('input#numtxt')
let lista = document.querySelector('select#seltxt')
let res = document.querySelector('div#res')
let valores = []

// 补全原代码缺失的两个校验函数，如果你已有对应实现可直接替换
function isNumero(val) {
  let numVal = Number(val)
  return !isNaN(numVal) && numVal >= 1 && numVal <= 100
}
function inLista(val, arr) {
  return arr.includes(Number(val))
}

function adicionar() {
  if (isNumero(num.value) && !inLista(num.value, valores)) {
    // 仅首次添加（数组为空）时移除默认提示
    if (valores.length === 0) {
      lista.options[0] = null
    }
    valores.push(Number(num.value))
    let item = document.createElement('option')
    item.text = `Valor ${num.value} adicionado.`
    lista.appendChild(item)
    // 可选优化：添加完成后清空输入框并聚焦，方便下次输入
    num.value = ''
    num.focus()
  } else {
    window.alert('Valor inválido ou já existe!')
  }
}

// 原代码绑定的finalizar函数可按需自行实现，不影响添加逻辑
function finalizar() {
  // 自定义收尾逻辑
}

HTML 部分 #

原有HTML结构无需改动，可顺手修正输入框前的拼写错误（将TYpe改为Type）：

<div>
  <p>Type a number between 1 and 100: <input type="number" name="num1" id="numtxt">
    <input type="button" value="Adicionar" onclick="adicionar()"></p>
</div>

<div>
  <p>
    <select name="sel1" id="seltxt" size="10">
      <option>Type a number above!</option>
    </select>
  </p>
  <p><input type="button" value="End" onclick="finalizar()"></p>
</div>

• 页面初始加载、valores数组为空时，select下拉框正常显示默认提示文本
• 首次添加有效输入值时，默认提示自动移除，新选项正常展示
• 后续多次添加有效输入值时，不会误删已有选项，所有新增选项都能正常追加展示

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