今天工作用到了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>qqoption>12 option value=2>bbboption>13 option value=3>cccoption>14 select>15 div>16 div class=con style=display:none>111div>17 div class=con style=display:none>222div>18 div class=con style=display:none>333div>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.offsety0 ) ) { 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 43 option value=1 onclick=showoptionvalue( this ) >aaaaaoption> 44 option value=2 onclick=showoptionvalue( this ) >bbbbboption> 45 option value=3 onclick=showoptionvalue( this ) >cccccoption> 46 select> 47 48 div id=reslut >div> 49 body> 50 html>
才知道),在ie里,select的option是不支持onclick事件的, 而在 ff 和 opera 里, option 是支持onclick事件的. (似乎也不支持,不过暂时我还不知道如何解决safari的问题.)
