点击选项事件答案

【问题标题】：Click on option event点击选项事件
【发布时间】：2021-05-23 15:58:53
【问题描述】：

如何处理选项元素的事件？

<select>
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

单击选项元素时，我想显示该元素的一些描述。任何想法如何做到这一点？

【问题讨论】：

如果有人来这里是为了 javascript 解决方案（不是 jQuery），只需为 change 事件添加一个事件监听器。
供将来参考，@niksvp 的答案中给出的第一个解决方案实际上是这个问题的正确答案。给出的 jQuery 答案是特定于 jQuery 的，而这个问题没有具体说明它的用途。

标签： javascript jquery html

【解决方案1】：

你会想要使用 jQuery 的change event。我将您选项的文本显示为警报，但您可以根据需要显示任何您想要的内容。（显然，您也可以将其放在页面的另一部分中……它不需要是警报。）

$('#myOptions').change(function() {
    var val = $("#myOptions option:selected").text();
    alert(val);
});

另外，请注意，我在您的 select 标签中添加了一个 ID，以便您可以更轻松地处理事件（我称之为 myOptions）。

示例：http://jsfiddle.net/S9WQv/

【讨论】：

【解决方案2】：

正如 JasCav 使用 jQuery 指定的，您可以在 javascript 中使用

 <select onchange="alert(this.options[this.selectedIndex].text);">
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

或者，选项的 onclick 事件，但请注意，它并非在所有浏览器上都兼容。

<select>
      <option value='option1' onclick="alert(this.value);" >Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
</select>

【讨论】：

这是一个好的解决方案吗？您可以使用键盘选择选项，它们不会触发任何与点击相关的内容。
@StevenLu - 请注意，在这种情况下，您还可以绑定 keypress 事件。但是这里OP面临click事件的困难，这反映在答案中。
我想，但这是XY problem 的一个例子，使用click 介于稍微错误和完全错误之间。我的直觉是，同时使用点击和键盘处理程序仍然不允许该功能在任何移动平台上运行。

【解决方案3】：

您可以使用 javascript 编写如下所述。

document.getElementById("select").addEventListener('change', (event) => {
  console.log(event.target.value)
});

<select id="select">
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

【讨论】：