javascript - 如何重新选择已经选择的选项

标签 javascript jquery html select

标题看起来很困惑,但我想做的是......

只有当用户使用此选项选择新选项时,我才知道如何处理 - $('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() ,在你完成选择后,没有任何东西被触发,因为选择元素仍然被聚焦,所以你需要像点击外部一样聚焦它来执行。

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

关于javascript - 如何重新选择已经选择的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20234805/

相关文章:

javascript - 如何即时更新一个平滑更新的进度条?

javascript - 使用 onkeyup 或按键事件调用函数

jquery - 寻找 jQuery 事件类型的完整列表

javascript - jQuery.each 在可用时不依赖 Array.forEach 是有原因的吗?

html - 根据高度排列列

javascript - 尝试让coffescript正确编译为 Node 服务器的javascript

javascript - 在子 vue 组件数据函数中访问 props?

javascript - 多个下拉菜单按钮 - 仅打开单击的按钮

html - 无法更改引导导航栏的颜色

JavaScript 和处理浮点确定性