当重新选择相同的选项时，运行下拉框的更改事件

Question

基本上，我有一个下拉菜单，长得像这样：

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

我正在尝试编写一个函数，即使选择相同的选项也会触发它，即使下拉菜单已经打开并重新选择了所选选项，我也希望它执行该函数。

- Spencer

---

类似的问题已经有答案了：https://dev59.com/qXRB5IYBdhLWcg3wXWK2#12404521 - Alex from Jitbit

我在另一个stackoverflow问题中回答了这个问题： https://dev59.com/qXRB5IYBdhLWcg3wXWK2#69704764 - 2ehr

Answer 1

如果你想用鼠标选择，你可以使用 mouseup。但是，当选择框被打开时它也会触发，所以你需要跟踪它被触发的次数（偶数：选择框正在打开，奇数：选择框关闭）：http://jsfiddle.net/T4yUm/2/。

$("select").mouseup(function() {
    var open = $(this).data("isopen");

    if(open) {
        alert(1);
    }

    $(this).data("isopen", !open);
});

- pimvdb

---

这很棒，真的帮了我很多，我添加了一些改进，请看下面的答案。 - James Ellis-Jones

这是一个不错的解决方法，但不太稳定。如果有人使用鼠标点击选择下拉列表，然后再使用键盘选择条目，open 的状态就会出错；下次用户打开下拉列表时，就会触发事件。 - lumbric

Answer 2

pimvdb的答案对我很有帮助，但我添加了一些额外的内容来处理键盘激活和移动选择时的导航：

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

的模糊处理程序处理了在下拉列表打开时导航离开选择器的情况，keyup处理程序处理了当您使用键盘更改选择器的值时的情况。因此，只有当用户单击“返回”以导航离开时，才认为用户最终选择了该值。如果您想要与键盘不同的行为，那么应该很容易做到。

- James Ellis-Jones

Answer 3

select 并不是用于这种方式的 - 在大多数情况下，您可以使用一些技巧来获得此类行为，例如跟踪 select 上的鼠标和键盘事件，但不能保证它们将持续工作或在每个平台上都有效。

我建议要么...

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

您能更详细地描述最终目标吗？

- s4y

---

尽管如此，事实上它确实被使用，并且是完全合理的，而不是设计上的缺陷。 - nicodemus13

Answer 4

一种替代方案是使用 .blur() 事件 -- http://jsfiddle.net/VKZb2/4/

优点

这将始终触发。

缺点

只有在控件失去焦点时才会触发。

- John Strickler

Answer 5

尝试以下解决方案。它考虑了通过鼠标单击或 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;
     }
   }
});

- amasmiller

Answer 6

我遇到了同样的问题。我只需将点击事件添加到选项标签并更改选择的值即可：

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

注意：此功能在iPhone或iPad设备上无法使用。

- Rico