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可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...
随机推荐
- Storm入门(四)WordCount示例
一.关联代码 使用maven,代码如下. pom.xml 和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to t ...
- JavaScript 最终将在编程语言中占统治地位?
JavaScript 最终将在编程语言中占统治地位? JavaScript 现在是大多数开发者都会使用的编程语言.网络效应会推动它成为有史以来第一个真正占统治地位的编程语言吗? 大约十年前,编程的方式 ...
- jQuery中$.each()方法的使用
$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧. 1.遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr1,functio ...
- 逆向-攻防世界-no-strings-attached
看题目就知道查找不到关键字符串,为防止踩坑,strings命令查看,没有找到有用的字符串.IDA载入程序查找入口函数, main函数中有4个函数,经过分析判断authenticate()为关键函数,跟 ...
- Flask自定义转换器,实现路由匹配正则表达式参数
Flask框架动态路由实现参数传递和Django框架有类似之处,但是相比于Django框架,Flask实现复杂的参数就需要自己自定义转换器来实现了,而不能向Django那样直接使用正则表达式 # 路由 ...
- 【学习总结】win7使用anaconda安装tensorflow+keras
tips: Keras是一个高层神经网络API(高层意味着会引用封装好的的底层) Keras由纯Python编写而成并基Tensorflow.Theano以及CNTK后端. 故先安装TensorFlo ...
- Jira安装过程
一.下载jira jira下载路径:https://www.atlassian.com/software/jira/download 二.安装 jira安装一直下一步下一步即可 三.破解 E:\JIR ...
- centos7之zabbix监控mysql(mariadb)数据库
一.Zabbix3.2.6使用自带模板监控MySQL 添加zabbix_agent客户端方法:http://www.cnblogs.com/lei0213/p/8858269.html mysql服务 ...
- Nginx 常见问题
1. CreateFile() "C:\Users\zhang\Desktop\K\My Project\SSL-数字证书\Nginx配置\nginx-1.12.2/conf/nginx.c ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...