Question

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

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

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

Answer 1

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

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

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

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

Answer 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>

Answer 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>

单击选项事件

3 个答案: