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

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

于是想换一种方法,用点击事件去监听,这里不能直接监听option的点击事件,因为select下的option标签是监听不到点击事件的,只能监听select的点击事件,于是第二个问题来了:当点击select打开下拉框的时候会触发click事件,再点击某个option时会触发第二次click事件,肯定是不行的,得想办法区分这两次点击事件。于是就想用target的tagname能不能区分,于是:
————————————————
版权声明:本文为CSDN博主「muzimiaomiaopeng」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/muzimiaomiaopeng/article/details/98722826

两次的结果都是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;

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值