Javascript 如果选择了相同的选项，则无法将事件侦听器添加到选择选项

基本上，当chrome.storage.local中有更改时，下面的函数会清空select字段并用更新的选项重新填充它。这也是我想在选项中添加事件侦听器的时候，以便实现自定义操作

但我对此束手无策，因为某些原因，我无法将事件侦听器添加到选项中。我有一个setTimeout函数，它在渲染后打印出选项，选项在那里，但onclick为null。我还尝试添加带有setTimeout的事件侦听器，以双重检查它们是否在另一个步骤中被覆盖，但这也不起作用

编辑以澄清反馈：Console不显示事件侦听器回调Console.log（'working'），因此它不工作。我已经在使用selectonchange监听器了。但我需要重新关注“信息”字段，即使他们重新选择了相同的选项

任何帮助都将不胜感激

function updateSelectOptions(selectID){
    var selectList = document.getElementById(selectID);
    while (selectList.length > 0) {
        selectList.remove(selectList.length -1);
    }

    var storage = chrome.storage.local;
    storage.get(['settingsArray', 'selectedPage'], function(data) {
        var settingsArray = data.settingsArray;
        var settingsNameArray = settingsArray.map(function(ele) {
            return ele.pageName;
        });
        if (selectID === 'pageSelectDropdown') {
            settingsNameArray.push('Add New Page');
        }

        var selectedPage = data.selectedPage;
        //Create and append the options
        for (var i = 0; i < settingsNameArray.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", i);
            option.setAttribute("class", 'optionClass');
            option.text = settingsNameArray[i];
            option.addEventListener('click', ()=>{
                console.log('working')
                document.getElementById('info').focus();
            });
            selectList.appendChild(option);
        }

        document.getElementById(selectID).value = selectedPage;
    })
}

函数更新选择选项（selectID）{
var selectList=document.getElementById（selectID）；
while（选择list.length>0）{
selectList.remove（selectList.length-1）；
}
var存储=chrome.storage.local；
获取（['settingsArray'，'selectedPage']，函数（数据）{
var settingsArray=data.settingsArray；
var settingsNameArray=settingsArray.map（函数（ele）{
返回ele.pageName；
});
如果（selectID==='pageSelectDropdown'）{
设置namearray.push（'addnewpage'）；
}
var selectedPage=data.selectedPage；
//创建并附加选项
对于（变量i=0；i{
console.log（'working'）
document.getElementById（'info'）.focus（）；
});
selectList.appendChild（选项）；
}
document.getElementById（selectID）.value=selectedPage；
})
}

实际上，即使这个玩具示例也不起作用，这里出了什么问题？鼠标悬停，单击两者都不会生成console.log事件

   <select id='pageSelectDropdown'>
        <option value='Add New Page'>Add New Page</option>
        <option value='Great Page'>Great Page</option>
        <option value='Family Page'>Family Page</option>
      </select>

      <script type="text/javascript">
      opts = document.getElementsByTagName('option');
      console.log(opts)
      for (i = 0; i < opts.length; i++) {
        opts[i].addEventListener('click', ()=>{
          console.log('clicked')
        })
      }
      </script>

添加新页面
伟大的一页
家庭网页
opts=document.getElementsByTagName（'option'）；
console.log（opts）
对于（i=0；i{
console.log（'clicked'）
})
}

不要依赖点击！听选择

change

。因此，您将知道选择的实际值。

不要依赖于单击！听选择

change

。这样您就可以知道所选择的实际值了。

编辑：对不起，尽管用户选择了相同的选项，但我还是忽略了您想要调用该函数。

你可以看看这个，这确实帮助我回答你的问题：

对于您的玩具示例，您可以执行以下操作：

var isopen=false；
var sel=document.getElementById（'pageSelectDropdown'）；
sel.addEventListener（'mouseup'，（）=>{
if（等参线）{
控制台日志（“更改为”+选择值）；
isopen=假；
}否则{
isopen=真；
}
});
sel.addEventListener（'blur'，（）=>{
isopen=假；
});

添加新页面
伟大的一页
家庭网页
编辑：抱歉，尽管用户选择了相同的选项，但我还是忽略了您想要调用该函数的信息。

你可以看看这个，这确实帮助我回答你的问题：


对于您的玩具示例，您可以执行以下操作：


var isopen=false；
var sel=document.getElementById（'pageSelectDropdown'）；
sel.addEventListener（'mouseup'，（）=>{
if（等参线）{
控制台日志（“更改为”+选择值）；
isopen=假；
}否则{
isopen=真；
}
});
sel.addEventListener（'blur'，（）=>{
isopen=假；
});

添加新页面
伟大的一页
家庭网页
但是onclick是空的
使用
addEventListener
添加事件监听器不会更改使用
添加的事件监听器。onclick=
-因此
.onclick
是空的很好-事件监听器应该正确地添加到rdlessbtw中，只需设置
selectList.options.length=0即可删除所有选项。这是多选列表吗？如果没有，在我看来，将侦听器添加到select本身并在处理程序中测试当前值会更容易。非常感谢您迄今为止的反馈！因此，它实际上没有在eventlistener回调中触发console.log，因此它仍然以某种方式被破坏。这是一个单一的选择列表，但我需要能够重新聚焦到信息字段，即使我重新选择了相同的选项，这就是onChange侦听器无法工作的原因。非常感谢您提供的信息，但不知道这些细节：）
但是onclick为null
使用
addEventListener添加事件侦听器不会更改“添加”的事件侦听器使用
.onclick=
-因此
.onclick
为空是非常好的-事件侦听器应已正确添加到RDLESSBTW，您只需设置
selectList.options.length=0
，即可删除所有选项。这是一个多选列表吗？如果没有，在我看来，将侦听器添加到select本身并在处理程序中测试当前值会更容易。非常感谢您迄今为止的反馈！因此，它实际上没有在eventlistener回调中触发console.log，因此它仍然以某种方式被破坏。这是一个单选列表，但我需要能够重新聚焦t