单击选项事件

IT技术 javascript jquery html
2021-03-20 10:53:20

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

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

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

3个回答

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

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

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

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

正如JasCav使用 jQuery指定的那样，您可以使用 javascript 在 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事件的困难，这反映在答案中。
2021-04-24 10:53:20
我想，但这是XY 问题的一个案例，并且使用 click 介于轻微错误和完全错误之间。我的预感是，同时使用点击和键盘处理程序仍然不允许该功能在任何移动平台上工作。
2021-04-25 10:53:20
这如何是一个好的解决方案？您可以使用键盘选择选项，它们不会触发任何与点击相关的内容。
2021-05-17 10:53:20

您可以使用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>

其它你可能感兴趣的问题
上一篇Angularjs中的动态表单名称属性<input type="text" name="{{ variable-name }}" /> 下一篇谷歌搜索引擎优化和隐藏元素