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可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...
随机推荐
- Git + Docker + Jenkins自动化部署web到Linux(Centos)
1.把代码托管到Github上 2.安装Docker 3.安装Jenkins 4.在项目中编写Dockerfile.publish.sh (1)Dockerfile内容 # 基于dotnet基础环境构 ...
- android等待对话框
等待对话框,这里有两种方式来实现: ProgressDialog方式 progressDialog初始化 private void initProgressDialog() { progressDia ...
- Python-包-65
包 包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...import形式,凡是在导入语句中(而不是在使用时)遇到带点的,都要第一时间提高警 ...
- ansible copy 模块详解
ansible 模块 copy one.概述 copy 模块的作用就是拷贝文件,它与之前介绍过的 fetch 模块类似,不过,fetch 模块是从远程主机中拉取文件到 ansible 管理主机,而 c ...
- Oracle查询字符串数据进行排序,以及去重复
原本的的一张表,填写数据的字段为字符串varchar2类型,然后进行排序的时候,就会出现问题.会默直接默认判断为第一个数字9最大,而不判断整个数字的大小. 所以,就要用到TO_NUMBER函数 sel ...
- 数据的存储方式:SQLiteOpenHelper的用法
Android为了让我们能够更加方便的的管理数据,专门提供了一个SQLiteOpenHelper类,它是一个抽象类,如果我们想要使用它,就需要创建一个自己帮助类去继承它,而且它有两个抽象的方法,分别是 ...
- laravel 开启定时任务需要操作
1.在xshell 中 crontab -e //编辑任务crontab -l //查看执行中的任务列表 2.在打开的任务中: /home/wwwroot/default 换为自己项目的根路径 vag ...
- Git diff 统计代码更改数量
1. git diff HEAD~2 获取最近两次提交的具体不同 包括增删的文件以及行数以及每行具体的改动 2. git diff --stat 获取文件更改的个数 增加行数 删除行数 3. git ...
- Vue-详解设置路由导航的两种方法
https://www.cnblogs.com/superlizhao/p/8527317.html
- METO CODE 223 拉力赛
传送门 继续水板子题... #include <bits/stdc++.h> #define ll long long using namespace std; inline int re ...