让IE的OPTION支持click事件

最新推荐文章于 2022-12-22 17:36:27 发布
最新推荐文章于 2022-12-22 17:36:27 发布
阅读量3.3k 收藏
点赞数
文章标签： ie safari opera function html null
 
众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的. 下面的代码演示了一种间接实现 option onclick的方法 注意:此方案只适用于　下拉方式的单选select.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.  <head>  
  4.   <title>select-option onclick </title>  
  5. <script type="text/javascript" >  
  6.   
  7. function simOptionClick4IE(){   
  8.     var evt=window.event  ;   
  9.     var selectObj=evt?evt.srcElement:null;   
  10.     // IE Only   
  11.     if (evt && selectObj &&  evt.offsetY && evt.button!=2   
  12.         && (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {   
  13.                
  14.             // 记录原先的选中项   
  15.             var oldIdx = selectObj.selectedIndex;   
  16.   
  17.             setTimeout(function(){   
  18.                 var option=selectObj.options[selectObj.selectedIndex];   
  19.                 // 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex   
  20.                 // 来判断用户是不是点击了同一个选项,进而做不同的处理.   
  21.                 showOptionValue(option)   
  22.   
  23.             }, 60);   
  24.     }   
  25. }   
  26.   
  27. function showOptionValue(opt,msg){   
  28.     var now=new Date();   
  29.     var dt= (1900+now.getYear())+'-'+(now.getMonth()+1)+'-'+now.getDate()+   
  30.             ' '+now.getHours()+':'+now.getHours()+':'+now.getSeconds()+'.'+now.getMilliseconds();   
  31.     var resultZone=document.getElementById('reslut');   
  32.     resultZone.style.margin="10px";   
  33.     resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ' = '+opt.value); 
  34. 　//这里可以进行很多处理，比如我要点击一个OPTION就打开一个网页，则可以这样写
  35.     location=opt.value;
  36. }   
  37.   
  38. </script>  
  39.  </head>  
  40.   
  41.  <body>  
  42.   
  43.   <select  onclick="simOptionClick4IE()" >    
  44.     <!-- 下面的 οnclick="showOptionValue( this )" 是为 ff 和 opera而准备 -->  
  45.     <option value=http://www.5566.org onclick="showOptionValue( this )" >aaaaa</option>  
  46.     <option value=http://www.sina.com.cn onclick="showOptionValue( this )" >bbbbb</option>  
  47.     <option value="http://www.csdn.net" onclick="showOptionValue( this )" >ccccc</option>  
  48.   </select>  
  49.   
  50. <div id="reslut" ></div>  
  51. </body>  
  52. </html>
jojoy_828
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SELECT点击相应option响应点击事件
10-18
点击option自动弹出value的值，作为初学者使用。
javascript option onclick事件ie解决方案 兼容ie,firefox
10-29
在 IE 浏览器中，Option onclick 事件无法正确触发的原因是因为 IE 不支持 Option 元素的 onclick 事件。相比之下，Firefox 浏览器可以正确地触发 Option onclick 事件。 解决方案 要解决这个问题，我们可以使用 ...
让IE的<option>支持click事件
大城小胖的大城
05-31 236
首先声明一下, 这个方法最初我是从同事阿汤那里学来的. 我只是又做了一些修改,使它更完善. 众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的cli...
select的option点击事件
weixin_30827565的博客
12-26 656
给option添加点击事件，可以用这个方法。 1 $("#demandID").on("change",function(){ 2 pID = $("option:selected",this).val();//需求主键 3 queryDemandByPid(pID); 4 }); #demandID是select标签的id； query...
IE9的事件
weixin_30686845的博客
07-26 199
<script type="text/javascript"> document.addEventListener("DOMContentLoaded",function(){ var elem=document.getElementById('btn'); elem.addEventListener('click',function(){ var cas=...
ie8模式下click无反应点击option无反应的解决方法
09-04
这个问题主要是由于IE8对于`<option>`标签的事件处理机制与现代浏览器有所差异，尤其是对于`click`事件的支持。 首先，我们来回顾一下问题的描述：在开发过程中，使用jQuery编写了一个功能，目的是当用户点击`...
AngularJS实现动态添加Option的方法
10-19
同时，我们可以为每个Option提供一个输入框让用户输入内容，并通过`ng-model`绑定到`content`属性。此外，我们还需要一个按钮来触发添加操作，通过`ng-click`调用`add`方法： ```html 添加Option: ...
javascript各浏览器中option元素的表现差异
10-28
这意味着在开发跨浏览器的Web应用时，开发者需要额外注意这一点，不能假定所有浏览器对于`option`元素都能提供相同级别的事件支持。当需要处理这些事件时，开发者可能会在IE浏览器中遇到功能缺失的情况，从而需要...
让ie的<option>支持click事件(转)
weixin_33714884的博客
11-05 62
众所周知,在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的. (safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.) 虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的opt...
ie9以下事件绑定
qq_32019935的博客
03-17 428
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定； 在JavaScript代码中绑定； 绑定事件监听函数。 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaScript支持在标...
使option onclick事件支持ie和firefox
KylinBL的专栏
10-06 2490
<br />对于select 的onclick事件，ie支持在select中设置onclick事件，在option中设置无效，但是在Firefox中，支持option的 onclick事件，在select中设置无效。另外，如果在onclick中想要得到点击的是哪一个option，是得不到的。为什么呢？因为在点击事件是发生在选择之前的，只有点击之后才能确定哪一个被选中了。所以在这是设置了一个定时函数，在单击之后60ms执行来判断哪个选中。<br /><br />下面给出了解决办法。<script type="
给select下拉列表的option添加onclick（点击）事件(兼容IE8, Chrome)
Kinber_XD的博客
05-16 1万+
1.参考资料:☞☞点我跳转 问题描述: select的onchange并不能满足所有的业务需求!!! 比如当我们第一次点击下拉列表的某一个option的时候会触发onchange, 但是当我们点击第二次再次点击相同的option的时候, (注意: 此时浏览器认为第一次选中的option与第二次选中的option一致, 不会再次触发onchange) 但是我们需要的是每次点击或选择opti...
select标签重复选中同一option时无法触发change事件的解决方法，option点击事件无效的替代方案，兼容老版IE
qq_40697553的博客
12-22 2482
select标签重复选中同一option时，无法触发change事件的解决方法，option点击事件无效的替代方案，兼容老版IE浏览器
Jquery ajax在select中动态加载option并且添加点击事件
热门推荐
李晓明的博客
12-28 2万+
select中动态加载option并且添加点击事件jsp代码：<script type="text/javascript"> $(function(){ findCenterName(); }); </script> <body> <select id="centerNameSelect" > </body> js代码：fun
ie11 实现下拉复选框
最新发布
05-23
下拉复选框（MultiSelect Dropdown）可以让用户从一个下拉菜单中选择多个选项。IE11 可以使用 HTML 和 JavaScript 实现这种下拉复选框。 以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MultiSelect Dropdown in IE11</title> <style> .dropdown { position: relative; display: inline-block; width: 200px; } .dropdown button { width: 100%; padding: 10px; background-color: #fff; border: 1px solid #ddd; text-align: left; cursor: pointer; } .dropdown ul { position: absolute; top: 100%; left: 0; z-index: 999; display: none; padding: 0; margin: 0; list-style: none; background-color: #fff; border: 1px solid #ddd; max-height: 150px; overflow-y: auto; } .dropdown ul li { padding: 10px; cursor: pointer; } .dropdown ul li:hover { background-color: #f5f5f5; } .dropdown input[type="checkbox"] { margin-right: 5px; } </style> </head> <body> <div class="dropdown"> <button>Choose options</button> <ul> <li><input type="checkbox" name="option1" value="Option 1">Option 1</li> <li><input type="checkbox" name="option2" value="Option 2">Option 2</li> <li><input type="checkbox" name="option3" value="Option 3">Option 3</li> <li><input type="checkbox" name="option4" value="Option 4">Option 4</li> <li><input type="checkbox" name="option5" value="Option 5">Option 5</li> </ul> </div> <script> var dropdown = document.querySelector('.dropdown'); var button = dropdown.querySelector('button'); var list = dropdown.querySelector('ul'); var checkboxes = list.querySelectorAll('input[type="checkbox"]'); button.addEventListener('click', function() { list.style.display = list.style.display === 'none' ? 'block' : 'none'; }); checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { var selected = []; checkboxes.forEach(function(cb) { if (cb.checked) { selected.push(cb.value); } }); button.textContent = selected.length ? selected.join(', ') : 'Choose options'; }); }); </script> </body> </html> ``` 这个示例使用了一个 `<div>` 元素来包含下拉复选框。其中有一个 `<button>` 元素用来显示当前选择的选项，一个 `<ul>` 元素用来显示选项列表，以及一些 `<li>` 元素用来显示每个选项。每个选项都有一个 `<input type="checkbox">` 元素，用来让用户选择该选项。 JavaScript 部分监听了 `<button>` 元素的点击事件，并在点击时切换显示或隐藏选项列表。同时，它还监听了每个 `<input type="checkbox">` 元素的改变事件，并在每次改变时更新 `<button>` 元素的文本内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值