即使重新选择了相同的选项，也要为select运行更改事件

Run change event for select even when same option is reselected

本文关键字：选项 select 事件 运行 新选择 选择      更新时间：2023-09-26

基本上，我有一个下拉菜单，看起来像这样:

<select>
  <option>0</option>
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
</select>

我试图写一个函数，即使当你选择相同的选项，即，即使下拉菜单打开并重新选择所选的选项，我想要它执行该函数。

如果您的意思是用鼠标选择，您可以使用mouseup。但是，当选择框被打开时，它也会触发，因此您需要跟踪它被触发的次数(偶数:select正在打开，奇数:select正在关闭):http://jsfiddle.net/T4yUm/2/.

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert(1);
    }
    $(this).data("isopen", !open);
});

pimvdb的回答对我帮助很大，但我增加了一些额外的位来处理键盘激活和导航远离选择:

$('select').mouseup(... as in pimvdb... )
  .blur(function() {
     $(this).data('isopen', false);
  }).keyup(function(ev) {
     if (ev.keyCode == 13)
        alert(1);
  });

当下拉菜单打开时，blur处理程序处理从选择中导航出去，keyup处理程序处理当你用键盘改变选择的值时。这样的行为是，只有当用户单击返回以离开时，才认为他们最终选择了该值。如果你想让键盘有不同的行为，这应该不难做到。

select不是这样使用的——在大多数情况下，你可以使用一些hack来获得这种行为，比如在select上跟踪鼠标和键盘事件，但不能保证它们会继续工作，或者在每个平台上工作。

我建议…

  1. 在更改时将select重置为默认值，并使用一些其他文本来指示哪一个被"选中"，或
  2. 使用select以外的控件。

你能更详细地描述一下最终目标吗?

另一种选择是使用.blur()事件——http://jsfiddle.net/VKZb2/4/

Pro

无论哪种方式都会触发

的

它只在控件失去焦点时触发

我遇到了同样的问题。我只是给选项标签添加了一个点击事件，并改变了select的值:

$("#select option").mouseup(function() {
    $(this).parent().val($(this).attr("value"));
    // do something.
});

尝试下面的解决方案。它解释了通过鼠标点击或Esc键失去焦点。

// whether or not dropdown is opened
var open = false;
$("#selectElement").on("click", function() {
    open = !open;
    if (!open)
    {
        console.log("option has been selected/re-selected");
    }
});
// update dropdown state upon loss of focus
$("#selectElement").on("blur", function() {
     if(open){
        open = !open;
     }
});
// update dropdown state upon Esc key of focus
$(document).keyup(function(e) {
   if (e.keyCode == 27) {
     if(open){
        open = !open;
     }
   }
});
相关文章：