前端开发——select的点击事件

近几天，在用select-option实现一个时间选择器的时候遇到了一点问题。最开始使用select的change事件监听用户的选择，发现第一个问题：当用户连续两次点击同一个option时，不能触发change事件。想想挺合理的，value值根本就没变嘛。

于是想换一种方法，用点击事件去监听，这里不能直接监听option的点击事件，因为select下的option标签是监听不到点击事件的，只能监听select的点击事件，于是第二个问题来了：当点击select打开下拉框的时候会触发click事件，再点击某个option时会触发第二次click事件，肯定是不行的，得想办法区分这两次点击事件。于是就想用target的tagname能不能区分，于是：

两次的结果都是select，这也刚好为不能监听到option的点击事件做了点着证明。想了另一个办法：搞个变量，初始值为0，点击的时候判断一下是不是第二次点击就好了，虽然感觉很粗暴，但确实能实现自己的需求。

第三个问题：页面加载完成自动触发事件。option有个selected属性，可以设置默认的选中项，坑在于这仅仅是设置了个值而已，并不能触发change事件，就算是通过$('select').val(1)这样去改变选中项都不能触发change事件，click事件就更不用说了，所以，如果页面需要默认的事件，在设置完selected属性或value后，需要用trigger方法来自动触发事件

2019.09.04补充：新的问题以及解决办法

一天，用mac的同事提出了问题： mac下效果不对！每次选择了option后，需要额外点击一次select才能触发事件。

好吧，只能换思路了。

既然点击事件用起来又麻烦，有没能完美解决问题，关键是很low，所以还是从change事件入手。当连续选择同一个option时，select的value没变，不能触发change，那每次点击select展开option前，把select的value变为-1什么的，肯定能触发change的，click事件不能用，因为点击option时也会触发，focus事件很合适。

html代码

<div class="main">
    <select name="" id="" class="select">
		<option value="1">111</option>
		<option value="2">2222</option>
		<option value="3">33333</option>
		<option value="4">444444</option>
	</select>
</div>

js

$('.select').on('change',function(){
	var val = $(this).val();
	console.log('请求服务端数据' + val);
	$(this).blur();
}).on('focus',function(){
	$(this).val(-1);
})

控制台输出可以看到，点击相同的option，是可以触发change事件的

有点不够好的地方就是，每次点击select，框内的值都会被清空，那就，盘他！

优化优化，html：

<div class="main">
	<select name="" id="" class="select">
		<option value="1">111</option>
		<option value="2">2222</option>
		<option value="3">33333</option>
		<option value="4">444444</option>
		<option value="5" style="display: none;"></option>
	</select>
</div>

js

$('.select').on('change',function(){
	var val = $(this).val();
	console.log('请求服务端数据' + val);
	$(this).blur();
}).on('focus',function(){
	var selectText = $(this).find('option:selected').text();
	$(this).find('option[value=5]').text(selectText)
	$(this).val(5);
})

新增了一个隐藏的option用来存放选中的值，select获取焦点的时候框里的内容就不会被清空了

 

附：原生js获取select一些值的方法

var obj = document.getElementById('select');

//获取选中项的索引
var idx = obj.selectedIndex;

//获取选中项的文本
var text = obj.options[index].text; 

//获取选中项的value值
var value = obj.options[index].value;