select标签添加onclick()事件的兼容写法
select标签添加onclick()事件的兼容写法
ZONGLYN
发布于 2019-08-08 06:48:47
发布于 2019-08-08 06:48:47
代码可运行
运行总次数：0
代码可运行
（本文年代久远，请谨慎阅读）
修改前
<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代码段，从而实现了一种灵活的兼容的触发事件的方法 个人认为，此办法非常不错。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2014-12-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
