选中select下拉菜单第一项不触发事件
分类:实例代码
select下拉菜单第一项通常是提示内容所以选中的时候不希望选中第一项触发事件。
下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script> window.onload = function () { var odiv = document.getElementById("show"); var osel = document.getElementById("sel"); osel.onchange = function () { if (this.value == 0) { return; } else { odiv.innerHTML = this.value; } } } </script> </head> <body> <div id="show"></div> <select id="sel"> <option value="0">-请选择-</option> <option value="1">css教程</option> <option value="2">div教程</option> <option value="3">js教程</option> <option value="4">正则表达式教程</option> </select> </body> </html>
上面的代码模拟实现我们的要求,选中第一个选项并不会有触发事件的感觉。
其实事件并不是没有触发,只是当选中第一个选项的时候,事件处理函数直接return返回。
相关阅读:
(1).document.getElementById()可以参阅document.getElementById()一章节。
(2).onchange事件可以参阅js change事件一章节。
(3).innerHTML可以参阅innerHTML一章节。
选中select下拉菜单第一项不触发事件,这样的场景在实际项目中还是用的比较多的,关于选中select下拉菜单第一项不触发事件就介绍到这了。
选中select下拉菜单第一项不触发事件属于前端实例代码,有关更多实例代码大家可以查看。