找回密码
 注册

select重复选择option重复触发事件的实现

php 发表于 2017/12/11 12:48 | 显示全部楼层 |阅读模式
select重复选择同一项默认不会再次触发change事件,change就是改变,只有select的value发生了改变,select change事件才会触发。
想要实现每次点击select的option都能够触发change事件,只要在value改变上面做点手脚即可。
可以添加mouseover事件,在鼠标移动到select上时,存下当前选中的option的索引,也就是selectedIndex,然后将select的selectedIndex设置为-1,然后分别在mouseout和change事件中作后续处理。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="renderer" content="webkit" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta name="format-detection" content="telephone=no, email=no, address=no" />        
  8.         <link rel="canonical" href="https://www.wuxiancheng.cn/" />        
  9.         <title>Select选择相同option时每次触发change事件</title>
  10. </head>
  11. <body>
  12.         <select>
  13.                 <option value="51-n.com">51-n.com</option>
  14.                 <option value="wuxiancheng.cn">wuxiancheng.cn</option>
  15.         </select>
  16.         <script>
  17.                 (function(){
  18.                         var oSelect = document.querySelector('select');
  19.                         oSelect.addEventListener(
  20.                                 'mouseover',
  21.                                 function(){
  22.                                         this.originalSelectedIndex = this.selectedIndex;
  23.                                         this.selectedIndex = -1;
  24.                                 }
  25.                         );
  26.                         oSelect.addEventListener(
  27.                                 'mouseout',
  28.                                 function(){
  29.                                         if(this.originalSelectedIndex > -1){
  30.                                                 this.selectedIndex = this.originalSelectedIndex;
  31.                                         }
  32.                                 }
  33.                         );
  34.                         oSelect.addEventListener(
  35.                                 'change',
  36.                                 function(){
  37.                                         this.originalSelectedIndex = -1;
  38.                                         // do something
  39.                                         console.log('Hello, Wu Xiancheng!');
  40.                                 }
  41.                         );                        
  42.                 })();
  43.         </script>
  44. </body>
  45. </html>
复制代码
以上代码为思路展示,IE8及更早以前版本需要自行兼容addEventListener(). 对于古老的浏览器,可能需要将this.originalSelectedIndex的写法改成setAttribute()通过属性值来实现。

还可以在mouseover事件处理函数中动态添加一个额外的option,将option的innerHTML设置为"请选择",将该条添加到当前选择的option上面,然后在mouseout事件处理函数中将额外的option删除掉。
以下代码中的let和Array.from为ES6新特性,旧版本浏览器不能支持,请自行将let换成var,将Array.from ... forEach换成for循环即可兼容。
  1. oSelect.addEventListener(
  2.         'mouseover',
  3.         function(){
  4.                 this.originalSelectedIndex = this.selectedIndex;
  5.                 let o = document.createElement('option');
  6.                 o.value = Math.random();
  7.                 o.innerHTML = '::请选择::';
  8.                 o.disabled = true;
  9.                 this.insertBefore(o, this.options[this.originalSelectedIndex]);
  10.                 this.selectedIndex = this.originalSelectedIndex;
  11.         }
  12. );
  13. oSelect.addEventListener(
  14.         'mouseout',
  15.         function(){
  16.                 Array.from(this.options).forEach(function(option){
  17.                         if(option.innerHTML === '::请选择::'){
  18.                                 option.parentNode.removeChild(option);
  19.                         }
  20.                 });
  21.                 if(this.originalSelectedIndex > -1){
  22.                         this.selectedIndex = this.originalSelectedIndex;
  23.                 }
  24.         }
  25. );
  26. oSelect.addEventListener(
  27.         'change',
  28.         function(){
  29.                 this.originalSelectedIndex = -1;
  30.                 // do something
  31.                 console.log('Hello, Wu Xiancheng!');
  32.         }
  33. );
复制代码

第三种方法,可以给select添加focus事件,然后动态将每个option的value作一些处理,让每一次value的值都不一样,比如将真正的value改成value|动态内容,而这个动态内容可以使用Math.random(),比如对于某个option,它的value="wuxiancheng.cn",你可以改成value="wuxiancheng.cn|0.6490113961789108"这样的格式,在表单提交时将select.value中多余的部分去掉即可。

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表