再次选择所选选项

Question

我有一个表格，我在每一行中使用选择菜单来针对该特定行执行不同的操作。

例如：

$(document).on('change', '.lead-action', function() {
    // Do stuff
}

此方法获取所选选项的值。根据选择的值，我显示不同的弹出窗口。当用户离开页面时，选择菜单保留先前选择的选项。

有时用户会点击选择菜单中的相同选项。当他们这样做时，上面的代码就不起作用了。

如果选择菜单中的相同选项被选中，有没有办法调用上面的代码块？

Answer 1

我收集到您只是希望在进行选择时触发下拉菜单。如果是这样，请查看Fire event each time a DropDownList item is selected with jQuery的答案。

在下面查看我的更新答案：
您可以使用这个小扩展：

$.fn.selected = function(fn) {
    return this.each(function() {
        var clicknum = 0;
        $(this).click(function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                fn(this);
            }
        });
    });
}

然后这样调用：

$(".lead-action").selected(function(e) {
    alert('You selected ' + $(e).val());
});

更新：

我实际上对原始脚本相当不满意。它会在很多情况下中断，任何依赖于两次检查点击计数的解决方案都将是非常善变的。

需要考虑的一些场景：

• 如果您点击，然后关闭，然后再打开，它将同时计算点击次数和触发次数。
• 在 Firefox 中，您只需单击鼠标即可打开菜单并拖动到所选选项，而无需抬起鼠标。
• 如果您使用任意组合的键盘敲击，您可能会导致点击计数器不同步或完全错过更改事件。
  • 您可以使用 Alt+↕（或 Chrome 和 Opera 中的 空格键）打开下拉菜单。
  • 当下拉菜单有焦点时，任何箭头键都会改变选择
  • 当下拉菜单打开时，单击 Tab 或 Enter 将进行选择

这是我刚刚想出的更全面的扩展：

查看是否选择了选项的最可靠方法是使用change 事件，您可以使用jQuery 的.change() 处理程序来处理该事件。

唯一剩下要做的就是确定是否再次选择了原始元素。
在任何情况下都没有很好的答案。

最简单的方法是检查option:selected元素上是否有click或keyup事件但Chrome, IE, and Safari don't seem to support events on option elements ，即使它们在 w3c recommendation

中被引用

Select 元素内部是一个黑盒子。如果您在其上收听事件，您甚至无法判断事件发生在哪个元素上或列表是否打开。

接下来最好的事情是处理blur 事件。这将表明用户已将注意力集中在下拉列表上（也许看到了列表，也许没有）并做出了他们想要坚持原始值的决定。要立即继续处理更改，我们仍将订阅 change 事件。并且为了确保我们不会重复计算，如果更改事件被引发，我们将设置一个标志，这样我们就不会回击两次：

Updated example in jsFiddle

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            var changed = false;
            $(this).focus(function () {
                changed = false;
            }).change(function () {
                changed = true;
                fn(this);
            }).blur(function (e) {
                if (!changed) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

Answer 2

使用 mouseup() 而不是依赖 change() -

$(document).on('mouseup', '.lead-action', function() {
    // Do stuff
}

这样，如果他们重新选择，您将获得一个可以处理的事件。

http://jsfiddle.net/jayblanchard/Hgd5z/