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事件中作后续处理。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no, email=no, address=no" />
<link rel="canonical" href="https://www.wuxiancheng.cn/" />
<title>Select选择相同option时每次触发change事件</title>
</head>
<body>
<select>
<option value="51-n.com">51-n.com</option>
<option value="wuxiancheng.cn">wuxiancheng.cn</option>
</select>
<script>
(function(){
var oSelect = document.querySelector('select');
oSelect.addEventListener(
'mouseover',
function(){
this.originalSelectedIndex = this.selectedIndex;
this.selectedIndex = -1;
}
);
oSelect.addEventListener(
'mouseout',
function(){
if(this.originalSelectedIndex > -1){
this.selectedIndex = this.originalSelectedIndex;
}
}
);
oSelect.addEventListener(
'change',
function(){
this.originalSelectedIndex = -1;
// do something
console.log('Hello, Wu Xiancheng!');
}
);
})();
</script>
</body>
</html>

复制代码

以上代码为思路展示，IE8及更早以前版本需要自行兼容addEventListener(). 对于古老的浏览器，可能需要将this.originalSelectedIndex的写法改成setAttribute()通过属性值来实现。

还可以在mouseover事件处理函数中动态添加一个额外的option，将option的innerHTML设置为"请选择"，将该条添加到当前选择的option上面，然后在mouseout事件处理函数中将额外的option删除掉。
以下代码中的let和Array.from为ES6新特性，旧版本浏览器不能支持，请自行将let换成var，将Array.from ... forEach换成for循环即可兼容。

oSelect.addEventListener(
'mouseover',
function(){
this.originalSelectedIndex = this.selectedIndex;
let o = document.createElement('option');
o.value = Math.random();
o.innerHTML = '::请选择::';
o.disabled = true;
this.insertBefore(o, this.options[this.originalSelectedIndex]);
this.selectedIndex = this.originalSelectedIndex;
}
);
oSelect.addEventListener(
'mouseout',
function(){
Array.from(this.options).forEach(function(option){
if(option.innerHTML === '::请选择::'){
option.parentNode.removeChild(option);
}
});
if(this.originalSelectedIndex > -1){
this.selectedIndex = this.originalSelectedIndex;
}
}
);
oSelect.addEventListener(
'change',
function(){
this.originalSelectedIndex = -1;
// do something
console.log('Hello, Wu Xiancheng!');
}
);

复制代码

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

账号		自动登录	找回密码
密码			新建账号