单击选项事件

Question

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

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

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

Answer 1

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

$('#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>