如何阻止函数每次点击都执行，避免HTML下拉菜单出现重复选项

问题原因 #

• 你将yearsArray函数绑定到了下拉框的onclick事件上，每次点击下拉框都会重新执行函数、往选项列表里追加新的Option，自然会出现重复
• 初始化函数里没有先清空下拉框已有选项，直接累加插入
• HTML里已经写了默认的value=1的选项，函数逻辑里又额外插入了value=1的选项，就算只执行一次也会出现重复的1选项

修复方案 #

推荐你直接在页面加载完成后一次性初始化下拉选项，不需要每次点击都重新加载，修改后的代码如下：

1. 修改HTML部分 #

删除select标签上的点击事件绑定：

<select id="years" name="years">
    <!-- 这里的默认option可以删掉，后面JS会自动生成带选中状态的1选项 -->
</select>

2. 修改JS部分 #

// 页面DOM加载完成后自动执行一次初始化
document.addEventListener('DOMContentLoaded', function() {
  yearsArray(20)
})

function yearsArray(num) {
    let years=document.getElementById("years")
    // 执行插入前先清空已有选项，从根源避免重复
    years.innerHTML = ''
    let year=[...Array(num+1).keys()]
    // 删掉多余的一次shift，保留1不用后面额外补
    year.shift()
    year.forEach(element => {
        years.add(new Option(element,element, element === 1))
    })
}

如果你的业务场景确实需要每次点击下拉框都重新渲染选项，那保留onclick绑定的同时，只要在yearsArray函数开头加上面的years.innerHTML = ''清空逻辑，也可以解决重复问题。

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