3

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

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

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

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

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

那么，我该如何解决这个问题？我是否需要拦截所有焦点事件并做脏活来解释发生了什么？有没有办法让 Chrome 选择禁用的选项而不是“编辑...”？

4

1 回答 1

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 选择禁用的选项，而不是默认启用的“编辑...”选项。

于 2012-06-06T18:41:49.210 回答