JS/Prototype-检测折叠的SELECT元素或实际选择的选项

Question

每当select元素更改其值时，我都会执行功能设置。它不是使用普通的onchange事件，而是每300ms执行一次，并且只有在检测到值发生变化时才调用处理程序。如果这对你有任何意义的话，我使用的是原型的Form.Element.Observer。

现在，在Firefox中，当用户将鼠标悬停在option上并触发定时值检查函数时，会调用处理程序，因为浏览器显示值已更改。我想做的是能够检测用户何时真正选择了该选项，而不是简单地悬停在上面。我意识到，在Prototype文档中，他们明确地注意到了这个bug(或功能，取决于你如何看待它)，但我希望能够规范化行为。

在某种程度上，这与我之前在StackOverflow上看到的一个问题有点相似(检测HTML选择元素是否展开(无需手动跟踪状态))，但我希望有人能告诉我如何只对特定的选择元素执行此操作，以及何时关闭而不是展开。

为了更好地理解我的意思，请查看http://jsfiddle.net/KxQd6/，处理select元素并查看控制台日志。

Answer 1

下面是一个示例，展示了如何通过您提到的不同阶段控制SELECT元素的更改：

(用户、dom加载和js更新)

此代码使用event.simulate，它提供了一种跨浏览器的触发/模拟事件的方式。

---

代码(小提琴)

document.observe('dom:loaded', function() {
var select = $('box_1'),
button_1 = $('change_via_ajax'), 
button_2 = $('change_via_script'), 
results = $('results');
// create observer on our select
select.observe('change', function(e) {
var d = new Date()
t = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
results.insert(new Element('div')
.update(t + ' - Change was fired, value is now [' + this.value + ']'));
});
button_1.observe('click', function() {
new Ajax.Request('/echo/json/', {
onComplete: function(j) {
select.options[Math.round(Math.random() * 2)].selected = true;
select.simulate('change');
}
});
});
button_2.observe('click', function() {
select.options[0].selected = true;
select.simulate('change');
});
});​

Answer 2

查看https://github.com/harvesthq/chosen(尤其是https://github.com/harvesthq/chosen/blob/master/coffee/chosen.proto.coffee第68-89行)。无法确定SELECT元素的当前状态，只能通过鼠标、键盘和UI事件的一组事件观测器来或多或少地可靠地跟踪它。