<select> 元素并在选项上观察('click') 以切换 option.selected答案

【问题标题】：<select> element and observe('click') on options to toggle option.selected<select> 元素并在选项上观察('click') 以切换 option.selected
【发布时间】：2012-11-02 12:40:42
【问题描述】：

我已经看到了一些使用 jQuery 做我想做的事的例子，但我正在为一个使用 Prototype 框架的应用程序开发一个插件，并希望坚持下去。

基本上，我想要的功能就像总是按下 ctrl 键一样。如果单击了选定的选项，我希望它取消选择。

这是我使用 jQuery 找到的一个示例：http://jsbin.com/idofa

这是我的版本不起作用，因为事件触发默认操作选择它（这导致它选择然后立即被取消选择）。

option.observe('click', function(event){
    this.selected = !this.selected;
});

我已经尝试添加 event.stop();和 event.preventDefault();两者似乎都没有效果。

谢谢！

【问题讨论】：

这不是回答你的问题，而是this.selected = ! this.selected。
哈，谢谢。更新了代码。
@eulogy 您是否尝试将“click”替换为“mousedown”？此外，event.stop() 不仅是个好主意，而且似乎很有必要！然后你必须添加类似this.select() 和this.unselect()
@lajarre 就是这样！我不认为我可以在那里使用 mousedown。
请注意，无需使用键盘导航点击选项即可选择选项。

标签： javascript dom prototypejs

【解决方案1】：

正确答案，来自我上面的评论：

选择是在鼠标按下时执行的，所以这里必须使用 'mousedown' 事件而不是 'click'。

option.observe('mousedown', function (event) {
    this.selected = !this.selected;
    event.stop();    // unnecessary in this case, but I think it's good practice
});

Victor 编辑的小提琴示例：

http://jsfiddle.net/RP7em/3/

【讨论】：

更好：jsfiddle.net/RP7em/3 - 在select上使用单个事件处理程序