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

Answer 2

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

Answer 3

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

current accepted answer在使用点击事件来捕捉已选择的<select>选项的选择方面很聪明，但如果您愿意指定列表的长度，则 as（在这种情况下）<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。

如何选择已选择的选项

3 个答案: