In recent days, I encountered a little problem when implementing a time selector with select-option. At the beginning, I used the change event of select to monitor the user's choice, and found the first problem: when the user clicks the same option twice in a row, the change event cannot be triggered. It's reasonable to think about it, the value has not changed at all.
So I want to change another method, use the click event to monitor, here you cannot directly monitor the option click event, because the option tag under select cannot monitor the click event, only the select click event can be monitored, so the second question is Now: when you click select to open the drop-down box, the click event will be triggered, and when you click on an option, the second click event will be triggered. So I wanted to use the tagname of the target to distinguish it, so:
————————————————
Copyright statement: This article is an original article by CSDN blogger "muzimiaomiaopeng", following CC 4.0 BY-SA Copyright agreement, please attach the original source link and this statement for reprinting.
Original link: https://blog.csdn.net/muzimiaomiaopeng/article/details/98722826
The result of the two times is select, which just proves that the click event of the option cannot be monitored. I thought of another way: make a variable, the initial value is 0, and when you click it, you can judge whether it is the second click. Although it feels rough, it can really meet your needs.
The third problem: the page load completes to trigger the event automatically. option has a selected attribute, which can set the default selected item. The pitfall is that this is only setting a value and cannot trigger the change event. Even if the selected item is changed through $('select').val(1) The change event cannot be triggered, let alone the click event, so if the page needs a default event, after setting the selected attribute or value, you need to use the trigger method to automatically trigger the event
2019.09.04 Supplement: new problems and solutions
One day, a colleague who uses mac raised a question: the effect under mac is wrong! Each time an option is selected, an additional click on select is required to trigger the event.
Well, I can only change my mind.
Since the click event is cumbersome to use, the key to whether it can solve the problem perfectly is that it is very low, so we should start with the change event. When the same option is continuously selected, the value of the select has not changed, and the change cannot be triggered. Then, before clicking the select to expand the option, change the value of the select to -1 or something, which will definitely trigger the change. The click event cannot be used, because It is also triggered when the option is clicked, and the focus event is very suitable.
html code
<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);
})As you can see from the console output, clicking the same option can trigger the change event
A little bad thing is that every time you click select, the value in the box will be cleared, so let him go!
optimization optimization, 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);
})Added a hidden option to store the selected value, the content in the box will not be cleared when the select gets the focus
Attachment: Native js method to get some values of select
var obj = document.getElementById('select');
//获取选中项的索引
var idx = obj.selectedIndex;
//获取选中项的文本
var text = obj.options[index].text;
//获取选中项的value值
var value = obj.options[index].value;