有没有办法在Chrome中的SELECT元素上触发click事件，即使所选选项没有改变？

Question

我有一个SELECT元素，其内容（OPTION元素）通过AJAX加载并插入就绪并且当更改不同的SELECT时。 两个SELECTS都有两个OPTION元素附加到通过AJAX加载的列表中：

<option disabled="disabled"></option>
<option value="edit">Edit&hellip;</option>

我准备好了以下jQuery事件绑定：

$('#theSelect').bind('change click', handleSelection);

然后handleSelection()方法截取所选的“Edit ...”选项，将选择切换回先前选择的选项，并触发显示对话框的其他功能，允许用户编辑菜单中的选项。 这在Safari和Chrome中效果很好，但有一种情况在Chrome中不起作用：如果没有通过AJAX加载的选项，那么只有禁用和“编辑...”选项可见，它不会触发正在选中“编辑...”选项的事件。 这似乎是因为，在Chrome中，默认选择“编辑...”选项（因为它是第一个启用的选项;另一方面，Safari选择禁用选项，因为它是第一个选项）并且它仅触发更改SELECT元素的事件，而不是点击 （为什么我同时听取点击和更改），但是当选择“编辑...”时，它实际上并没有改变，因此不会触发事件。

那么，我该如何解决这个问题呢？ 我是否需要拦截所有焦点事件并进行肮脏的工作以解释正在发生的事情？ 有没有办法让Chrome选择禁用选项而不是“编辑...”？

Answer 1

根据Slavo在评论中的建议 ，我强制所有浏览器在AJAX注入时选择第一个选项：

// force select the first option (fixes a Chrome issue)
$('#theSelect option:selected').removeAttr('selected')
$('#theSelect option:first-child').attr('selected', 'selected');

这标准化了浏览器行为，并使Chrome选择了禁用选项，而不是默认为启用的“编辑...”选项。