今天工作用到了select，想要给option添加click点击事件，可是却没有任何效果，百度了才发现，原来竟然是不支持呀！" >今天工作用到了select，想要给option添加click点击事件，可是却没有任何效果，百度了才发现，原来竟然是不支持呀！

我今天是用onchange来解决的，原谅也是才知道它可以用这个。select状态改变来调用函数。

虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项而你再次点击第一项时, select是不会被触发的.

집

웹 프론트엔드

HTML 튜토리얼

select中无法使用click的处理 - 嗑瓜子儿gf

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 01:46 PM

今天工作用到了select，想要给option添加click点击事件，可是却没有任何效果，百度了才发现，原来竟然是不支持呀！

众所周知(其实我才知道哎),在IE里, select的option是不支持onclick事件的, 而在FF 和 OPERA 里, option 是支持onclick事件的.
(safari似乎也不支持,不过暂时我还不知道如何解决safari的问题.)

我今天是用onchange来解决的，原谅也是才知道它可以用这个。select状态改变来调用函数。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.11.3.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> 
<span style="color: #008080;">10</span> <span style="color: #0000ff;"><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="qq"</span><span style="color: #ff0000;"> onchange</span><span style="color: #0000ff;">="outputSelect()"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span>     <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>qq<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span>bbb<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span>     <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>ccc<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;"></span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none"</span><span style="color: #0000ff;">></span>111<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none"</span><span style="color: #0000ff;">></span>222<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="display:none"</span><span style="color: #0000ff;">></span>333<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;"><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #000000;">    $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.con</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).eq(</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">).show();
</span><span style="color: #008080;">22</span>     <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> outputSelect(){
</span><span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">aa</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;">24</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> num </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#qq</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).find(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">option:selected</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).index();
</span><span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(num);
</span><span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #000000;">        $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.con</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).hide();
</span><span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #000000;">        $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">.con</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).eq(num).show().siblings().hide();
</span><span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #000000;">    }
</span><span style="color: #008080;">29</span> 
<span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #000000;">    console.log($(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#qq</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).find(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">option:selected</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).val());
</span><span style="color: #008080;">31</span>     <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> aa</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#qq option:selected</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).val();
</span><span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #000000;">    console.log(aa);
</span><span style="color: #008080;">33</span> <span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">34</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">35</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

로그인 후 복사

虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项而你再次点击第一项时, select是不会被触发的.

下面的代码演示了一种间接实现 option onclick的方法

로그인 후 복사

注意:此方案只适用于　下拉方式的单选select.

로그인 후 복사

<span style="color: #008080;"> 1</span>     <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;"> 2</span>     <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;"> 3</span>      <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;"> 4</span>       <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>select-option onclick <span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span> <span style="color: #0000ff;">></span>  
<span style="color: #008080;"> 6</span>       
<span style="color: #008080;"> 7</span>     <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> simOptionClick4IE(){  
</span><span style="color: #008080;"> 8</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> evt</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">window.event  ;  
</span><span style="color: #008080;"> 9</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> selectObj</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">evt</span><span style="background-color: #f5f5f5; color: #000000;">?</span><span style="background-color: #f5f5f5; color: #000000;">evt.srcElement:</span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">;  
</span><span style="color: #008080;">10</span>         <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> IE Only  </span>
<span style="color: #008080;">11</span>         <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (evt </span><span style="background-color: #f5f5f5; color: #000000;">&&</span><span style="background-color: #f5f5f5; color: #000000;"> selectObj </span><span style="background-color: #f5f5f5; color: #000000;">&&</span><span style="background-color: #f5f5f5; color: #000000;">  evt.offsetY </span><span style="background-color: #f5f5f5; color: #000000;">&&</span><span style="background-color: #f5f5f5; color: #000000;"> evt.button</span><span style="background-color: #f5f5f5; color: #000000;">!=</span><span style="background-color: #f5f5f5; color: #000000;">2</span>  
<span style="color: #008080;">12</span>             <span style="background-color: #f5f5f5; color: #000000;">&&</span><span style="background-color: #f5f5f5; color: #000000;"> (evt.offsetY </span><span style="background-color: #f5f5f5; color: #000000;">></span><span style="background-color: #f5f5f5; color: #000000;"> selectObj.offsetHeight </span><span style="background-color: #f5f5f5; color: #000000;">||</span><span style="background-color: #f5f5f5; color: #000000;"> evt.offsetY</span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;"> ) ) {  
</span><span style="color: #008080;">13</span>                   
<span style="color: #008080;">14</span>                 <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 记录原先的选中项  </span>
<span style="color: #008080;">15</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> oldIdx </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> selectObj.selectedIndex;  
</span><span style="color: #008080;">16</span>       
<span style="color: #008080;">17</span> <span style="background-color: #f5f5f5; color: #000000;">                setTimeout(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){  
</span><span style="color: #008080;">18</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> option</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">selectObj.options[selectObj.selectedIndex];  
</span><span style="color: #008080;">19</span>                     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex  </span>
<span style="color: #008080;">20</span>                     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 来判断用户是不是点击了同一个选项,进而做不同的处理.  </span>
<span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #000000;">                    showOptionValue(option)  
</span><span style="color: #008080;">22</span>       
<span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #000000;">                }, </span><span style="background-color: #f5f5f5; color: #000000;">60</span><span style="background-color: #f5f5f5; color: #000000;">);  
</span><span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #000000;">        }  
</span><span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #000000;">    }  
</span><span style="color: #008080;">26</span>       
<span style="color: #008080;">27</span>     <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> showOptionValue(opt,msg){  
</span><span style="color: #008080;">28</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> now</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Date();  
</span><span style="color: #008080;">29</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> dt</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #000000;">1900</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getYear())</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">(now.getMonth()</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">)</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getDate()</span><span style="background-color: #f5f5f5; color: #000000;">+</span>  
<span style="color: #008080;">30</span>                 <span style="background-color: #f5f5f5; color: #000000;">'</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getHours()</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getHours()</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getSeconds()</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">.</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">now.getMilliseconds();  
</span><span style="color: #008080;">31</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> resultZone</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">reslut</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);  
</span><span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #000000;">        resultZone.style.margin</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">10px</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;  
</span><span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #000000;">        resultZone.innerHTML</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">dt </span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> 时,点击了: </span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> (opt.text </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;"> = </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">opt.value);  
</span><span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #000000;">    }  
</span><span style="color: #008080;">35</span>       
<span style="color: #008080;">36</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">37</span>      <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">38</span>       
<span style="color: #008080;">39</span>      <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">40</span>       
<span style="color: #008080;">41</span>       <span style="color: #0000ff;"><span style="color: #800000;">select  </span><span style="color: #ff0000;">onclick</span><span style="color: #0000ff;">="simOptionClick4IE()"</span> <span style="color: #0000ff;">></span>   
<span style="color: #008080;">42</span>         <span style="color: #008000;"><!--</span><span style="color: #008000;"> 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 </span><span style="color: #008000;">--></span>  
<span style="color: #008080;">43</span>         <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="showOptionValue( this )"</span> <span style="color: #0000ff;">></span>aaaaa<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">44</span>         <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="showOptionValue( this )"</span> <span style="color: #0000ff;">></span>bbbbb<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">45</span>         <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="showOptionValue( this )"</span> <span style="color: #0000ff;">></span>ccccc<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">46</span>       <span style="color: #0000ff;"></span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">47</span>       
<span style="color: #008080;">48</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="reslut"</span> <span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">49</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>  
<span style="color: #008080;">50</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>  </span></span></span></span></span></span></span></span></span></span></span></span>

로그인 후 복사

才知道）,在IE里,select的option是不支持onclick事件的, 而在 FF 和 OPERA 里, option 是支持onclick事件的. (似乎也不支持,不过暂时我还不知道如何解决safari的问题.)

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7562

Cakephp 튜토리얼

1384

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

& lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles

select中无法使用click的处理 - 嗑瓜子儿gf

今天工作用到了select，想要给option添加click点击事件，可是却没有任何效果，百度了才发现，原来竟然是不支持呀！

我今天是用onchange来解决的，原谅也是才知道它可以用这个。select状态改变来调用函数。

虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在 你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项 而你再次点击第一项时, select是不会被触发的.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

虽然onchange在某些时刻可以代替 option的click事件, 但是两者并无法做到完全等价. 因为onchange只有在你点击的option和之前的option不同时才会触发. 当select当前选中的是第一项而你再次点击第一项时, select是不会被触发的.