如何重新选择已选择的选项

Question

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

我知道只有当用户选择新选项时才能处理 - $('select').change(function(){}).`

但是如果用户想要选择已经选择的选项则不行.

我也尝试过radio同样的事情.

好吧,例如我有一个选项(红色,蓝色,绿色).

<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);
});

当我选择"蓝色"选项时,它会提示"蓝色"值,然后我选择"绿色",它也会提醒"绿色".但当我再次选择"绿色"时,没有任何反应.

Answer 1

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

我试过了click()，但它在你甚至可以选择一个选项之前就被触发了。

使用blur()，完成选择后不会触发任何内容，因为 select 元素仍在聚焦，因此您需要像单击外部一样聚焦以执行它。

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

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

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

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

但是现在的问题是当您第一次单击<select>下拉菜单时会显示并且我们还添加了类'open'. 然后单击别处（不选择选项）下拉菜单被隐藏，因此当您单击返回时<select>，事件会在您甚至可以选择选项之前被触发。

所以我添加了这段代码来解决这个问题：

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

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

您可以在此jsfiddle 中对其进行测试。干杯!

我认为何时<select>失去焦点也是一个问题。所以我添加了blur()事件。查看此更新jsfiddle