如何选择已选择的选项

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()，在您完成选择后不会触发任何内容，因为选择元素仍处于聚焦状态，因此您需要像在外部单击一样聚焦才能执行。

所以我只是建议 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

Answer 2

我使用onclick='this.value=-1' 解决了将选择重置为空...

Answer 3

在用户选择已经选择的选项时什么都不应该发生的情况下，我认为这是 DOM 的“功能”，而不是没有事件发生的错误。但是，如果您的代码使用 <select> 做的比进行简单的选择更多，那也是一种麻烦，所以我很感激其他人在这里解决了这个问题。

current accepted answer 巧妙地使用了点击事件来捕获对已选择的<select> 选项的选择，但是如果您愿意指定列表的长度 作为（在这种情况下）<select size=3>，您可以简单地将“更改”事件中的选定值设置为“”，每次都会触发相同的选择。

在这种情况下，the OP's example 将更改为：

HTML：

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

jQuery：

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

唯一的副作用是选择元素现在可能以三行而不是一行的形式显示给用户。

（将选择的value 设置为“”的想法归功于Kirby L. Wallace）。