如何重新选择已选择的选项 [英] How to reselect already selected option

问题描述

标题似乎令人困惑，但是我想做的是...

The title seems confusing but what I want to do is...

我知道只有用户选择新选项-$('select').change(function(){})时，该如何处理.

I know how to handle only if the user select new option with this - $('select').change(function(){}).`

但如果用户要选择已选择的选项，则不会.

But not if the user wants to select the already selected option.

我也尝试过使用radio，但是还是一样.

I've also tried with radio but same thing.

例如，好，我有一个带有选项(红色，蓝色，绿色)的选择.

Okay for example I have a select with an option (red,blue,green).

<select>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

我有这个脚本:

$('select').change(function(){
    var val = $(this).val();
    alert(val);
});

当我选择选项蓝色"时，它会警报一个值蓝色"，然后我选择绿色"时，它也会警报绿色".但是当我再次选择绿色"时，什么也没发生.

When I select option 'blue' it alerts a value 'blue', then I select 'green' it alerts 'green' as well. but when I select 'green' again nothing happens.

推荐答案

这个问题引起了我的注意，因为这是非常基本的东西，但实际上没有人进一步研究它. OP一直在使用change()，但是当您重新选择当前选择的选项时，则不会触发任何操作！

This question comes to my attention as this is pretty basic stuff but no one actually dig into it further. OP has been using change(), but when you reselect the current selected option nothing is fired!

我尝试过click()，但是它甚至在您没有选择任何选项之前就被触发了.

I tried click(), but it's firing before you can even choose an option.

使用blur()后，由于select元素仍处于焦点状态，因此什么都不做会被触发，因此您需要像单击外部那样将其聚焦出来以执行它.

With blur(), after you're done selecting nothing is fired because the the select element is still being focused, so you need to focus out like clicking outside for it to execute.

所以我只是建议OP切换到radio类型的输入，然后使用click()事件处理执行.这样，您仍然可以重新选择已标记的单选按钮.

So I just suggested OP to switch to a radio type input then handle execution with click() event. That way you can still reselect already marked radio button.

但是随后我注意到您只需要第二次单击<select>元素，因为第一次单击将打开选项的下拉列表，第二次单击将返回所选选项的值.所以我想出了这个:

But then I noticed that you just need to get the second click on <select> element because the first click opens the drop down list of options the second click returns the value of your selected option. So I came up with this:

$('select').click(function(){
    var $this = $(this);

    if ($this.hasClass('open')) {
        alert($this.val());
        $this.removeClass('open');
    }else {
        $this.addClass('open');
    }  
});

但是现在的问题是，当您第一次单击<select>时，将显示下拉列表，并且我们还添加了类'open'.然后单击其他位置(不选择任何选项)，该下拉菜单将隐藏，因此，当您单击<select>时，会触发该事件，甚至无法选择一个选项.

But now the problem is when you first click on <select> the drop down is being showned and we've also added the class 'open'. Then clicking elsewhere (without selecting an option) the drop down is hidden so when you click back on <select> the event is fired before you can even select an option.

所以我添加了以下代码来解决此问题:

So I added this code to fix that:

$(document).click(function(e){
   var $select = $('select');

    if (!$select.is(e.target)){
        $select.removeClass('open'); //reset the steps by removing open
    }
});

您可以在 jsfiddle 中进行测试.干杯！

You can test it out in this jsfiddle. Cheers!

我认为，当<select>失去焦点时，这也是一个问题.因此，我添加了blur()事件.看到此更新 jsfiddle

I think when <select> loses its focus is also a concern. So I added blur() event. See this update jsfiddle

这篇关于如何重新选择已选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！