JS <select> 列表框在单击/更改时不起作用

Posted 2023-02-18

【中文标题】JS <select> 列表框在单击/更改时不起作用

【英文标题】：JS <select> listbox not working on click/change

【发布时间】：2022-01-18 18:56:26

【问题描述】：

我需要做的是通过 fetch 在线收集一些数据并使用这些数据来提供用户信息等（我可以做到）。在某些情况下，fetch 可以返回多个结果（一个数据数组），所以我决定在页面中创建一个元素来列出数组中元素的所有名称（数组中的每个元素都是一个子数组各种信息，也是“名称”，即位置名称）。

我正在使用 Chrome。一切正常，我存储数据，这样我创建了另一个函数（理论上）为用户提供有关列表框中所选选项的信息。如果我直接调用该函数，它可以正常工作，这意味着它会返回它应该返回的所有信息。实际上不起作用的是这个返回信息的函数应该在单击/从列表中选择任何选项时触发并且它不起作用。我没有收到任何错误消息，它什么也不做。

你在这张图片中看到的是当你点击“过滤器”时发生的事情（它实际上过滤了检测到的名称类似于“Milano”的世界位置），用户在页面中获得信息以及在右侧日志侧看到的内容在红色方块中返回我提到的那个数组的内容（它包含数据，所以它正在工作），在列表中选择的索引（最后一个，所以它是 5）和这个选定位置的坐标。

这发生在创建选项之后，因为我直接调用函数（返回有关所选选项的数据），但如果我手动使用列表，它什么也不做（如您在列表中看到的，之后没有任何记录那些坐标）。

我尝试创建这样的选项：

function createOption(text)
  let listOption = new Option(text, text, true, true);
  return listOption;

我直接在列表中创建选项是为数组中的每个元素 i 执行一个“for”循环：

document.getElementById("keyword-results").append(createOption(data.data[i].station.name));

我也尝试了 appendChild 而不是 append。正如我所说，这行得通，但手动使用列表不起作用。我声明的是：

document.getElementById("keyword-results").addEventListener("onchange", selection());

作为“selection()”返回数据的函数。

function selection()
  let index = document.getElementById("keyword-results").selectedIndex;
  console.log(index);
  if (index > -1)
    let currentResult = results.data[index];
    let aqi = currentResult.aqi;
    console.log(aqi);
    document.getElementById("answer").innerhtml += `The estimated AQI [...]`;
    let far = distance(currentResult.station.geo[0], currentResult.station.geo[1]);
    if (far != null || far != undefined) 
      document.getElementById("answer").innerHTML += `The estimated distance [...]`;
    
  

我也尝试了“change”、“onclick”和“click”作为触发功能的方法，但它们都不起作用。你有什么建议吗？我在 *** 和网络上都找不到任何有用的东西。如果你想查看整个代码，这是我的 GitHub 仓库https://github.com/leorob88/pollution-forecast-API

【参考方案1】：

document.getElementById("keyword-results").addEventListener("onchange", selection());

addEventListener 需要一个函数作为第二个参数，selection() 不是函数，但 selection 是。

当您使用addEventListener 时，没有名为onchange 的此类事件实际上是change

这样就变成了：

document.getElementById("keyword-results").addEventListener("change", selection);

Reference.

【讨论】：

这并没有改变任何东西（不过，在我看来，没有 () 的情况下写错了），甚至没有“onclick”...

addEventListener 需要一个函数作为第二个参数，selection() 不是函数，但 selection 是。另外，我没有第一手注意到，但是当您使用 addEventListener 时，没有名为 onchange 或 onclick 的此类事件，它们被命名为 click 和 change，更新了答案以反映这一点

尽管如此，这些都不起作用：document.getElementById("keyword-results").addEventListener("change", selection);document.getElementById("keyword-results").addEventListener("change", selection, false);（存储库会不断更新，因为我试图解决这个问题）