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

How to reselect already selected option

本文关键字：选择 选项 何重新      更新时间：2023-10-23

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

只有当用户选择新选项时，我才知道如何处理 - $('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);
});
当我选择选项"蓝色">

时，它会提醒值"蓝色"，然后我选择"绿色"，它也提醒"绿色"。 但是当我再次选择"绿色"时，没有任何反应。

这个问题引起了我的注意，因为这是非常基本的东西，但实际上没有人进一步深入研究它。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

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

我已经通过使用解决了这个问题：

$('#id_selec').on('click', 'option', function (e) {
    value = $(this).val();
    // ....

如果选择任何(包括已选择的(选项，处理程序将起作用。

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

当前接受的答案在使用单击事件来捕获已选择<select>选项的选择方面很聪明，但是如果您愿意将列表的长度指定为(在本例中(<select size=3>，则可以简单地从"更改"事件中将所选值设置为"，并且每次都会触发相同的选择。

在这种情况下，OP 的示例将更改为：

.HTML： 

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

j查询：

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

唯一的副作用是选择元素现在可能向用户显示为三行而不是一行。

(感谢柯比·L·华莱士(Kirby L. Wallace(将选择value设置为"的想法(。

相关文章：