zoukankan      html  css  js  c++  java
  • IE下不支持option的onclick事件

    <select>
      <option onclick="test('www.hao123.com')"value="www.hao123.com">hao123</option> 
      <option on click="test('www.baidu.com')" value="www.baidu.com">baidu</option>
      <option on click="test('www.google.com')" value="www.google.com">google</option>
    </select>

    <script type="text/javas cript">
      function test(s){
        window.open(s);
      }
    </script>

    这些代码在Firefox下能正常运行;在IE下不能运行,且没有报错.

    最后发现了问题所在:在IE里,select的option是不支持onclick事件的,而在Firefox和 OPERA 里, option 是支持onclick事件的。
    那么应该怎么实现原设定的功能?用Select元素的onchange事件。这时主要是考虑如何获得被选中的选项所代表的链接。
    修改后代码如下:

    <select id="friendLink" on change="test()> 
      <option value=
    "www.hao123.com">hao123</option>
      <option value=
    "www.baidu.com">baidu</option>
      <option value=
    "www.google.com">google</option>
    </select>

    <script type=
    "text/javas cript">
      function test(){
        var targetSlect=document.getElementById(
    "friendLink");
        var targetHref=targetSlect.options[targetSlect.selectedIndex].value;
        window.open(targetHref);
      }
    </script>

    虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的. 下面的代码演示了一种间接实现 option onclick的方法 注意:此方案只适用于下拉方式的单选select.

  • 相关阅读:
    图解SQL的Join(转)
    phpmyadmin 自动登录的办法
    ajax的data传参的两种方式
    如何在vue里面访问php?
    vue 路由部署服务器子目录问题
    Vuthink正确安装过程
    关于vueThink框架打包发布的一些问题
    使用npm安装依赖,尽量别使用cnpm,会漏掉很多依赖的
    phpstorm(或webstorm) 打开后 一直停留在scanning files to index....,或跳出内存不够的提示框
    vuethink 配置
  • 原文地址:https://www.cnblogs.com/andy-do/p/3199214.html
Copyright © 2011-2022 走看看