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可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...
随机推荐
- Python 爬虫 之 阅读呼叫转移(一)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/jcjc918/article/details/37533073 你是否苦恼于网上无法下载的& ...
- Azure存储账户的日志分析方法
1.首先确认日志功能是否开启(日志文件根据存储账户的类型,按使用量收费 . 2.在存储账户-Usage(classic)-Metrics中查看突出流量的时间: 3.在Explorer中下载对应时间点的 ...
- 《JAVA程序设计》_第八周学习总结
一.学习内容 1.泛型类声明--15.1知识 可以使用"class 名称"声明一个类,为了和普通的类有所区别,这样声明的类称作泛型类,如: class People<E> ...
- 类Date
概述: java.util.Date类 表示特定的瞬间,精确到毫秒.毫秒就是千分之一秒.继续查阅API,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日期对 ...
- Boolean 类型转换
原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...
- DAY18、常用模块
一.random:随机数1.(0,1) 小数:random.random()2.[1,10] 整数:random.randint(1,10)3.[1,10) 整数:random.randrange(1 ...
- WIN10解决:失败 – 检测到病毒文件下载失败问题
欢迎访问我的个人博客四个空格,本文永久链接移至:WIN10解决:失败 – 检测到病毒文件下载失败问题 这个是Windows防火墙的原因,直接按WINDOWS键,输入windows,窗口搜索:Windo ...
- 北京2018网络赛A题
题意:给你一个迷宫,迷宫有开始节点和结束节点,问你从开始走到结束的最小时间,其中,#代表这个点有毒气,身上必须带着氧气瓶才行,B代表每次进入这个点可以带一个氧气瓶,最多身上带五个,P代表进入这个点加速 ...
- MT【323】向量模的范围
已知单位向量 $\overrightarrow e_1,\overrightarrow e_2$ 的夹角为 $120^\circ$,$\left|x\overrightarrow e_1+y\over ...
- HAOI2018苹果树
题解 首先所有生成树的情况树是\(n!\)的,因为第一次有1中方法,第二次有两种放法,以此类推... 然后我们发现距离这种东西可以直接枚举每条边算贡献. 于是我们枚举了一个点\(i\),又枚举了这个点 ...