当前位置: 开发笔记 > 前端 > 正文

javascript下拉框选项单击事件的例子分享

作者：Fier田野莎莎 | 来源：互联网 | 2022-03-11 10:14

这篇文章主要分享了一些javascript下拉框选项单击事件的例子，以及在例子中遇到的问题的解决方法，十分实用，推荐给小伙伴们参考下。

我本人是从事前端开发的技术人员，下拉框是我们应用的比较多的页面元素，今天我结合实际工作中遇到的问题说一下关于下拉框注册事件的一些例子，希望对大家有所帮助。

代码如下:

以上是一段非常简单的单选下拉框代码，如果我们要通过单击下拉选项获取对应的value,大致的代码如下:

代码如下:

　　var sel=document.getElementById("sel");

　　var option=sel.options;

　　for(var i=0;i
　　　　option[i].Onclick=function(){

　　　　　　alert(this.text);//获取下拉选项的文本值

　　　　　　alert(this.value);//获取下拉选项的value值

　　　　}

　　}

　以上代码在ie9以下以及chrome上不能产生预期效果，在Firefox上有效。针对这种情况，不建议在option选项上绑定click事件,建议利用change事件来代替,因为change是通用的，从本质上看来就是change。

代码如下:

　　var sel=document.getElementById("sel");

　　sel.Onchange=function(){

　　　　alert(sel.options[sel.selectedIndex].value);

　　}

以上就是本文的全部内容了，希望大家能够喜欢。

推荐阅读

css
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
firefox
使用 Ubuntu 中的 Python 获取浏览器历史记录

使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]

蜡笔小新 2023-12-14 08:57:59
css
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
firefox
获取关联数组键的列表的方法及浏览器支持

本文介绍了获取关联数组键的列表的方法，即使用Object.keys()函数。同时还提到了该方法在不同浏览器的支持情况，并附上了一个代码片段供读者参考。 ... [详细]

蜡笔小新 2023-12-11 22:11:22
firefox
编写可保护的代码的重要性及优化方法

本文讨论了编写可保护的代码的重要性，包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法，如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道，如不规范的命名、重复代码、过长的函数和参数列表等。最后，介绍了如何处理数据泥团和进行函数重构，以提高代码质量和可维护性。 ... [详细]

蜡笔小新 2023-12-11 18:32:44
firefox
macOS Big Sur全新设计大版本更新，10+个值得关注的新功能

本文介绍了Apple发布的新一代操作系统macOS Big Sur，该系统采用全新的界面设计，包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出，macOS Big Sur的设计与iPadOS越来越接近，结合了去年iPadOS对鼠标的完善等功能。 ... [详细]

蜡笔小新 2023-12-10 19:53:41
firefox
JavaScript简介及语言特点

本文介绍了JavaScript的起源和发展历程，以及其在前端验证和服务器端开发中的应用。同时，还介绍了ECMAScript标准、DOM对象和BOM对象的作用及特点。最后，对JavaScript作为解释型语言和编译型语言的区别进行了说明。 ... [详细]

蜡笔小新 2023-12-10 17:45:49
firefox
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
javascript
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
css
CSS |网格行结束属性

CSS|网格-行-结束属性原文:https://www.gee ... [详细]

蜡笔小新 2023-10-17 15:21:56
firefox
火狐Firefox ios版本二次开发 (四) 源码精简

对Firefoxios源码的精简Firefox的依赖使用carthage来进行管理，国内的网络是在过于坑爹，相关的依赖包总是无法下载下来，花了两天时间，手动将Firefox所依赖的库导入 ... [详细]

蜡笔小新 2023-10-17 14:50:00
firefox
页面请求方法参数最长_关于 HTTP GET/POST 请求参数长度最大值的一个理解误区

http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的，最大不能超过XX ... [详细]

蜡笔小新 2023-12-13 19:20:03
css
分享css中提升优先级属性!important的用法总结

web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]

蜡笔小新 2023-12-11 11:25:16
firefox
Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]

蜡笔小新 2023-12-09 19:58:36
firefox
[Windows]_[网络]_[浏览器无法访问网站DNS_PROBE_POSSIBLE]

场景1.IE,Firefox浏览器访问不了网站,谷歌浏览器可以,返回错误码DNS_PROBE_POSSIBLE.2.pingwww.qq.com可以ping通,ping局域 ... [详细]

蜡笔小新 2023-10-17 17:55:37

Fier田野莎莎

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章