Home > Article > Web Front-end > select中无法使用click的处理_html/css_WEB-ITnose
select中无法使用click的处理_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:17:501400browse
今天工作用到了select，想要给option添加click点击事件，可是却没有任何效果，百度了才发现，原来竟然是不支持呀！
众所周知(其实我才知道哎),在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的.
(safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.)
我今天是用onchange来解决的，原谅也是才知道它可以用这个。select状态改变来调用函数。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/jquery-1.11.3.js"></script> 6 <title></title> 7 </head> 8 <body> 9 10 <select name="" id="qq" onchange="outputSelect()">11 <option value="1">qq</option>12 <option value="2">bbb</option>13 <option value="3">ccc</option>14 </select>15 <div>16 <div class="con" style="display:none">111</div>17 <div class="con" style="display:none">222</div>18 <div class="con" style="display:none">333</div>19 </div>20 <script>21 $(".con").eq(0).show();22 function outputSelect(){23 console.log("aa");24 var num =$("#qq").find("option:selected").index();25 console.log(num);26 $(".con").hide();27 $(".con").eq(num).show().siblings().hide();28 }29 30 console.log($("#qq").find("option:selected").val());31 var aa=$("#qq option:selected").val();32 console.log(aa);33 </script>34 </body>35 </html> 虽然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 } 35 36 </script> 37 </head> 38 39 <body> 40 41 <select onclick="simOptionClick4IE()" > 42 <!-- 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 --> 43 <option value="1" onclick="showOptionValue( this )" >aaaaa</option> 44 <option value="2" onclick="showOptionValue( this )" >bbbbb</option> 45 <option value="3" onclick="showOptionValue( this )" >ccccc</option> 46 </select> 47 48 <div id="reslut" ></div> 49 </body> 50 </html>
才知道）,在IE里,select的option是不支持onclick事件的, 而在 FF 和 OPERA 里, option 是支持onclick事件的. (似乎也不支持,不过暂时我还不知道如何解决safari的问题.)
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：前端实现QQ会话功能（常用笔记3）_html/css_WEB-ITnoseNext article：全局CSS的终结_html/css_WEB-ITnose