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事件失效的更多相关文章

  1. react中使用map时onClick事件失效

    分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style= ...

  2. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  3. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  4. vue中router-link的click事件失效的解决办法

    title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...

  5. IE下不支持option的onclick事件

    <select> <option onclick="test('www.hao123.com')"value="www.hao123.com" ...

  6. 解决iscroll5在手机页面上onclick事件失效

    Iscroll.js使用之后页面上面A标签的onclick事件无效了   解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...

  7. 有关attribute和property,以及各自对select中option的影响

    这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性.   attribute property 设置方法 option.setAttribute('selected', true ...

  8. Jquery 移除 html中绑定的onClick事件

    HTML绑定示例: <button class="edit" onClick="showTurnEdit(this)">编辑</button& ...

  9. Android ListView中Item点击事件失效解决方案

    欢迎关注公众号,每天推送Android技术文章,二维码如下:(可扫描) 在平常的开发过程中,我们的ListView可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...

随机推荐

  1. Storm入门(二)集群环境安装

    1.集群规划 storm版本的变更:storm0.9.x   storm0.10.x  storm1.x上面这些版本里面storm的核心源码是由Java+clojule组成的.storm2.x后期这个 ...

  2. MYSQL的information_schema数据库中你可以得到的信息!!!

    1.COLUMNS 记录了所有表字段的一些基本信息,例如权限信息等. 2:TABLES :使用该表可以查询每一个表的详细信息,例如数据占用空间大小.索引大小以及表的更新时间以及表的行数等 3:视图 可 ...

  3. Java SpringBoot集成RabbitMq实战和总结

    目录 交换器.队列.绑定的声明 关于消息序列化 同一个队列多消费类型 注解将消息和消息头注入消费者方法 关于消费者确认 关于发送者确认模式 消费消息.死信队列和RetryTemplate RPC模式的 ...

  4. 使用try-with-resources优雅的关闭IO流

    Java类库中包括许多必须通过调用close方法来手工关闭的资源.例如InputStream.OutputStream和java.sql.Connection.客户端经常会忽略资源的关闭,造成严重的性 ...

  5. Facebook 广告投放相关概念简介(1)

    本文不涉及具体代码实现,仅对开发API的前置内容做简单介绍,想参考代码请绕行! 广告主(广告管理工具) ·需要推广自己的应用.网站.主页,所以有了广告管理工具 . ·一个广告主仅可拥有一个广告账户(可 ...

  6. EXCEL记录

    ー.重要快捷键 Ctrl + F → 查找 Ctrl + H → 替换 Ctrl + G → 定位 Ctrl + 1 → 设置单元格格式 Ctrl + Enter → 一并输入多个单元格 Ctrl + ...

  7. css之图片下方定位遮掩层

    需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...

  8. WMI入门教程之WMI中的类在哪里?

    Powershell专栏: https://www.jb51.net/list/list_234_1.htm https://www.pstips.net/get-wmiobject-becomes- ...

  9. canvas学习笔记,实用知识点总结(上)

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  10. Spring 框架中注释驱动的事件监听器详解

    事件交互已经成为很多应用程序不可或缺的一部分,Spring框架提供了一个完整的基础设施来处理瞬时事件.下面我们来看看Spring 4.2框架中基于注释驱动的事件监听器. 1.早期的方式 在早期,组件要 ...