javascript - 如果您选择相同的选项，则无法添加事件监听器来选择选项

Question

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

但是我对此束手无策，由于某种原因我无法向选项添加事件监听器。我有一个 setTimeout 函数，可以在渲染后打印出选项，并且选项在那里，但 onclick 为空。我还尝试使用 setTimeout 添加事件监听器，以仔细检查它们是否在另一个步骤中被覆盖，但这也不起作用。

编辑以澄清反馈:控制台不显示事件监听器回调console.log('working')，因此它不起作用。我已经在使用 select onchange 监听器了。但我需要重新关注“信息”字段，即使他们重新选择相同的选项。

任何帮助将不胜感激!

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;
    })
}

实际上，即使这个玩具示例也不起作用，这里出了什么问题？鼠标松开、单击都不会产生 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>

Answer 1

不要依赖点击!听听选择change。这样你就会知道真正选择的值是什么。