前端开发——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代码
js
$('.select').on('change',function(){
var val = $(this).val();
console.log('请求服务端数据' + val);
$(this).blur();
}).on('focus',function(){
$(this).val(-1);
})控制台输出可以看到，点击相同的option，是可以触发change事件的
有点不够好的地方就是，每次点击select，框内的值都会被清空，那就，盘他！
优化优化，html：
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;