select中option的onclick事件失效
html:
<select id="pageSelect">
<option value="1" selected onclick="openNewPage()">页面1</option>
<option value="2" onclick="openNewPage()">页面2</option>
</select>
js:
<script type="text/javascript">
function openNewPage(){
var value = $("# pageSelect option:select").value;
if(value == "1"){
//弹出页面1
}else{
//弹出页面2
}
}
</script>
以上,在高版本浏览器可以正常运行,但是在低版本浏览器,option的onclick事件无效,因为低版本浏览器不支持option的onclick事件
解决方法:
可以在select添加onclick事件,不采用onchange事件,是因为选项内容值必须改变,才能触发onchange事件;
但是,在select中添加onclick事件,会导致你点击这个选择框还没选择选项时,就会触发onclick事件,所以,添加onclick事件后,在js中也要进行处理
html:
<select id="pageSelect" onclick="openNewPage(this)">
<option value="1" selected>页面1</option>
<option value="2">页面2</option>
</seelct>
js:
<script type="text/javascript">
//定义一个布尔类型变量,用于控制选择框的点击事件
var isSelect=true;
function openNewPage(value){
var optionSelect= value.options[value.selectedIndex];
if(value.value == optionSelect.value){
isSelect = !isSelect
} else {
isSelect = true;
}
if(isSelect == true){
if(value == "1"){
//弹出页面1
}else{
//弹出页面2
}
}
}
</script>
参考网址:
https://blog.csdn.net/svtme/article/details/5149544
select中option的onclick事件失效的更多相关文章
- react中使用map时onClick事件失效
分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style= ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- 下拉框select中option居中样式
下拉框select中option居中样式 text-align:center;text-align-last:center;
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- IE下不支持option的onclick事件
<select> <option onclick="test('www.hao123.com')"value="www.hao123.com" ...
- 解决iscroll5在手机页面上onclick事件失效
Iscroll.js使用之后页面上面A标签的onclick事件无效了 解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...
- 有关attribute和property,以及各自对select中option的影响
这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性. attribute property 设置方法 option.setAttribute('selected', true ...
- Jquery 移除 html中绑定的onClick事件
HTML绑定示例: <button class="edit" onClick="showTurnEdit(this)">编辑</button& ...
- Android ListView中Item点击事件失效解决方案
欢迎关注公众号,每天推送Android技术文章,二维码如下:(可扫描) 在平常的开发过程中,我们的ListView可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...
随机推荐
- Linux学习-汇总
1.基础linux学习 Linux-基础学习(一)-基本命令 Linux-基础学习(二)-基本部署 Linux-基础学习(三)-Nginx学习 Linux-基础学习(四)-部署图书管理系统项目 Lin ...
- HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
- 吐血总结|史上最全的MySQL学习资料!!
在日常工作与学习中,无论是开发.运维.还是测试,对于数据库的学习是不可避免的,同时也是日常工作的必备技术之一.在互联网公司,开源产品线比较多,互联网企业所用的数据库占比较重的还是MySQL. 在刚刚出 ...
- 随心测试_软测基础_004<测试人员工作职责>
接上篇续,依据_软测基础体系:<依据不同的测试对象,选取适合的方法,按照设计的流程完成测试工作,检验整个过程是否达到测试的目的>.“学以致用”,实践于工作职责 常见面试题: —— 诸如以下 ...
- MyEclipse不自动编译问题
没图,别找了... 我在MyEclipse上从SVN中导项目,导下的项目跑不起来,发现tomcat的classes中是空文件夹. 以下是在网上找的其他方法: 1.确保:Project->buil ...
- PyCharm选中文件夹新建时Directory与Python package的区别
pycharm创建普通的directory和package时都是在硬盘上建立一个文件夹.但是建package时会在这个文件夹中自动地生成一个空的__init__.py文件.python的一个包是一个带 ...
- git添加秘钥提示Key is already in use
种种原因,需要修改git账号的秘钥. 操作如下: 1.删除系统上.ssh下的known_hosts文件 (一般在这个路径下C:\Users\Administrator\.ssh)如果账号不是Admi ...
- AOP - 2 实例(SpringBoot 注解方式)
1.创建Spring Boot项目 创建一个Spring Boot 项目,然后pom中引入web 模块与AOP相关依赖. <dependency> <groupId>org.s ...
- mysql5.6.x 字符集修改
1 安装好mysql5.6.x 之后,修改字符集配置为utf8才能支持中文,因为默认为latin1 查看mysql字符集命令: SHOW VARIABLES LIKE 'char%' 2 修改配置文件 ...
- [转帖]EXPDP dumpfile和parallel的关系
http://blog.itpub.net/28602568/viewspace-2133375/ 转帖 EXPDP 里面 parallel 与 dumpfile 里面的文件数的关系. 但是我这里有一 ...