使用jquery .on选择选项中的mousedown事件

Question

我正在阅读documentation of the .on event handler of jQuery，我开始玩它。

我有一个简单的＆lt; select＆gt;将multiple属性设置为true的元素。 但是，我希望用户能够选择多个项目，而无需按ctrl或shift键

根据.on文档，如果您指定一个选择器，它会自动将这些事件处理程序添加到该容器内添加的与指定选择器匹配的任何新项目。

所以在我的情况下，我可以决定替换＆lt; option＆gt;列表框中可用的元素，但我仍然希望为这些选项提供相同的功能，而不必重新绑定这些事件等。

有人可能认为以下代码片段可以解决问题（至少，我做过）：

$('#dropdownlist').on('mousedown', 'option', function(e){
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    return false;
});

因此，当用户点击该列表框中的某个选项时，默认操作将被取消，并且取决于该项目是否已被选中，它将反转该选项。

我创建了一个小小提示，演示了这种行为：fiddle

在那个小提琴中，第一个下拉列表的行为符合预期，但更换项目时功能会丢失。这仅适用于FF＆amp;铬。

第二个下拉列表是我认为应该如此（事件处理明智），但除了Chrome之外似乎没有用 - .- 更换项目时会保留该功能，因为在更换项目后单击某个项目时，控制台仍会记录为“2”。

有人能解释一下为什么会这样吗？难道我做错了什么？ 请指出我正确的方向！

谢谢！

~Dirk

Answer 1

IE并不尊重选项标签本身的mousedown事件。你必须使用select标签的OnChange事件，这不是你（我）想要的。我试图做与你完全相同的事情，并在每次尝试时停止。我终于放弃了，并把它作为一个复选框列表，因为我可以得到你想要在这里做的相同的行为。

你可以看到this question的某些选项，但我从来没有按照你描述的方式让它工作。