Question

我有一个界面，用户点击<option>从列表中选择一个建筑物以获取更多信息。这会触发<option>上的DOM点击事件，我会抓住它来提供相关信息。有些用户按向上 / 向下选择相邻的<option>。我怎么能抓住这个事件？没有改变，按键，按键或焦点火。

var newOption = document.createElement('option');
// ....
newOption.addEventListener('change', handleMyEvent);

如果处理程序在用户点击时也会触发，这很好，因为两者都应该做同样的事情。

Answer 1

您应该将onchange事件侦听器附加到select元素

<select id="mySelect" onchange="handleMyEvent()">
  <option value="1">Option 1
  <option value="2">Option 2
</select>

您可以使用此演示进行试验，方法是在w3schools.com处使用键盘选择选项。

Answer 2

如果您尝试检测用户何时通过鼠标或键盘导航到选择，则需要将该功能绑定到焦点事件。然后，您可以获得所选的选项。像这样的东西会起作用：

<强> HTML

<select id="foo"></select>

<强>的JavaScript

var select = document.getElementById('foo');

for(var i = 1; i <= 5; i++) {
    var newOption = document.createElement('option');
    newOption.innerHTML = "bar"+i;
  select.appendChild(newOption);
}




select.addEventListener('change', handleMyEvent);
select.addEventListener('focus', handleMyFocusEvent);

function handleMyEvent() {
    console.log(this.value)
}

function handleMyFocusEvent() {
    console.log('Select is focused')
    console.log(this.value)
}

JS小提琴示例：https://jsfiddle.net/qzkL1y7w/1/

希望有所帮助！

Answer 3

如果要在循环选项时跟踪它，则还需要添加onKeyUp事件处理程序。 select元素仍然具有焦点，并且表单元素未被更改＆＃34;直到它失去焦点（取决于浏览器/版本）。

Company.duplicates.where("name like 'a%'").limit(2)

当通过键盘选择`<option>`时如何捕获？

3 个答案: