说明:
1、下面使用的代码仅适用于于IE浏览器,测试环境为IE8.
2、下面的代码来自于网络,我做了下闭包的整合
情景说明:
对于这样的一个select标签:
- <select id="s">
- <option onkeydown="onkeyDown(this)" onkeypress="onkeyPress(o)" onkeyup="onkeyUp(o)"
- value="文化">文化</option>
- <option onkeydown="onkeyDown(this)" onkeypress="onkeyPress(o)" onkeyup="onkeyUp(o)"
- value="科技">科技</option>
- </select>
当我们选择了“文化”的时候,会触发select的onchange事件,但是如果我们再次选择“文化”,不会有任何的事情发生。
对于大多数的应用场景来说,这样就足够了,但是在某些特殊的情况下,我们想让每次的select控件的选择都产生事件,并且返回被选中的option的value,哪怕这次选中的option和上次选的option是一样的。
所以,综合网上现有的代码,我进行了一下包装,代码不限制使用,完全公开(ps:写的很烂):
- function addEventHandle(sID,oFunction) {
- var o = document.getElementById(sID);
- if (!o) return;
- (function() {
- o.onclick = function() {
- var evt = window.event;
- var selectObj = evt ? evt.srcElement : null;
-
- if (evt && selectObj && evt.offsetY && evt.button != 2 && (evt.offsetY > selectObj.offsetHeight || evt.offsetY < 0)) {
-
- setTimeout(function() {
- var option = selectObj.options[selectObj.selectedIndex];
- oFunction(option)
- }, 60);
- }
- }
- }
- )();
- }
使用范例【用于IE8等IE的内核】
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>测试Option选择事件</title>
-
- <script type="text/javascript" src="TableProcess.js"></script>
-
- <script language="JavaScript" type="text/javascript">
- //传入table标签的id
- function show(o) {
- textarea.value = o;
- }
- }
- window.onload = function() {
- addEventHandle("s",setReq);
- }
- function setReq(Obj) {
- //show(Obj.text);
- show(CurentTime());
- }
-
- function addEventHandle(sID,oFunction) {
- var o = document.getElementById(sID);
- if (!o) return;
- (function() {
- o.onclick = function() {
- var evt = window.event;
- var selectObj = evt ? evt.srcElement : null;
- // IE Only
- if (evt && selectObj && evt.offsetY && evt.button != 2 && (evt.offsetY > selectObj.offsetHeight || evt.offsetY < 0)) {
- setTimeout(function() {
- var option = selectObj.options[selectObj.selectedIndex];
- oFunction(option)
- }, 60);
- }
- }
- }
- )();
- }
- </script>
-
- <style type="text/css">
- .style1
- {
- width: 100%;
- }
- </style>
- </head>
- <body>
- <p>
- <select id="s">
- <option value="文化">文化</option>
- <option value="科技">科技</option>
- </select>
- <p id="shows">
- 内容:<input type="text" id="textarea" /></p>
- </p>
- </body>
- </html>