html select标签用法（分享js下拉框实现代码）

今天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并不适合使用 click 来触发，而要使用 change 事件。

1、select元素下拉的click事件

html代码

 下拉1
 下拉2
 下拉3
 下拉4

点击下拉后，输出信息如下：

通过上图可以发现，如果 select 元素的下拉菜单使用 click 事件的话，会输出两次结果，也就说在展开下拉菜单之前与选择下拉菜单之后分别触发了 click 事件，所以 select 下拉选项的触发事件，不能使用 click，而使用 change 事件。

2、javascript select 元素的触发事件

示例代码

 选项1
 选项2
 选项3
 选项4

输出结果：

3、jquery select 元素的触发事件

html示例代码：

 颜色1
 颜色2
 颜色3

输出结果：