单击选项事件

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>