专栏首页程序萌部落select标签添加onclick()事件的兼容写法

select标签添加onclick()事件的兼容写法

(本文年代久远,请谨慎阅读)

修改前

<select style="height:25px;width:160px;"> 
  <option onclick="xx('err')" selected>选择查找方式</option>
  <option onclick="xx('low')" >简单查询</option>
  <option onclick="xx('mid')" >模糊检索</option>
  <option onclick="xx('hih')" >高级搜索</option>
</select>

javascript如下:

function xx(value){
	alert(value);
	if(value=="low"){
            ... ...
 	}else if(value=="mid"){
   ... ...
 	}else if(value=="hih"){
   ... ...
 	}
}

以上代码片是可以在Firefox和IE9下运行的,但是它在我的360浏览器上就是无效的,究其原因还是IE版本的问题(存在兼容性问题), 也就是:老版本只能这样 <select onclick() ></select>

而高版本和Firefox则支持这样 <option onclick() ></option>

具体版本我们不去管它,因为我找到了折中的实现办法,即可以兼容的实现触发事件,解决了以上问题

修改后

修改后的代码片如下:

<select style="height:25px;width:160px;" onclick="xx(this)"> 
	<option value="err" selected>选择查找方式</option>
	<option value="low" >简单查询</option>
	<option value="mid" >模糊检索</option>
	<option value="hih" >高级搜索</option>
</select>

javascript:

function xx(value){
    var selectedOption=value.options[value.selectedIndex];  
	//alert(selectedOption.value);
	if(selectedOption.value=="low"){
... ...
 	}else if(selectedOption.value=="mid"){
... ...
 	}else if(selectedOption.value=="hih"){
... ...
 	}
}

修改后的实现其实是用了低版本IE的方法,但是通过获取到选项的value值,来选择要执行的js代码段,从而实现了一种灵活的兼容的触发事件的方法 个人认为,此办法非常不错。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hexo的安装及重置恢复

    Hexo博客已经使用挺长时间了,其出色的静态网页渲染能力深得我的喜欢,然鹅也是因为 Hexo 基本完全依赖渲染模板的原因,如果在整博客的过程中引入了错误的代码段...

    ZONGLYN
  • Python的面向对象

    ZONGLYN
  • 将群晖相册嵌入到Hexo博客中

    如何高效便捷的在博客中更新自己的动态是困扰很多人的问题,简单的方案就是另起炉灶在博客重新发布一份,但这种方法耗时耗力,因此不建议这样做。从原po平台同步到博客的...

    ZONGLYN
  • 那些年,我见过最奇葩的几个面试经历

    从2011年起,我利用业余时间给一些企业做技术培训及咨询类的工作,其中也包含一些培训机构。

    吃草的罗汉
  • 轻便迷你hosts 编辑器 小工具附hosts位置路径查看方法

    打开软件即可编辑本地hosts,非常小巧的软件,仅200k,每次修改保存软件会自动备份之前的hosts文件。

    AlexTao
  • 如何在Ubuntu上使用Firefox,Siege和Sproxy对网站进行基准测试

    Siege是一种可配置的基准测试和测试工具,适用于通过发出网页请求来测试Web服务器的网站。Siege请求的每秒页数可以设置为从每秒几页到网站可以处理的最大数量...

    黑色技术
  • “too many open files”的原理和解决方案

    “too many open files”这个错误大家经常会遇到,因为这个是Linux系统中常见的错误,也是云服务器中经常会出现的,而网上的大部分文章都是简单修...

    cutd
  • 软件测试行业趋势分析和思考

    软件测试行业趋势分析和思考  (源文件地址:https://github.com/zhengwh/share-tech/blob/master/dev/the-...

    用户1170933
  • MySQL(九)之数据表的查询详解(SELECT语法)二

    上一篇讲了比较简单的单表查询以及MySQL的组函数,这一篇给大家分享一点比较难得知识了,关于多表查询,子查询,左连接,外连接等等。希望大家能都得到帮助! 在开始...

    用户1195962
  • 基于OpenCV创建视频会议虚拟背景

    虚拟背景是当前远程工作的员工中的热门话题之一。由于Covid-19的流行,许多人必须通过视频通话以便继续工作。很多视频会议的软件可以设置虚拟背景,以便用户建立更...

    小白学视觉

扫码关注云+社区

领取腾讯云代金券