1

将文本添加到输入框时，我正在使用 jQuery 向选择元素添加选项。

在 FireFox 和 Chrome 中，一旦添加文本，选择就会更新，单击选择一次会按预期显示新选项。在 IE 中，默认选项会在您键入时立即显示，但第一次单击时不会显示其他选项。在第二次单击选择时，会显示新选项。

如何让 IE 像 Chrome 和 FF 一样立即更新？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('paste mouseup keyup change', 'input', function () {
            updateOptions();
        });

        function updateOptions() {
            setTimeout(function () {
                if ($('input').val().length > 0) {
                    newOptions = '<option>' + $('input').val() + '</option><option>A</option><option>B</option><option>C</option>';
                } else {
                    newOptions = '<option></option>'
                }
                $('select').empty().append(newOptions);
            }, 0);
        }
    });
</script>
<input type="text"/>
<select>
    <option>before</option>
</select>

超时用于粘贴事件。示例可以在http://jsfiddle.net/c7G6L/4/看到

我尝试了几个 SO 解决方案： DIV swap from JQuery - 动态选择和选项在 IE9 中不起作用，但这似乎给 FireFox 带来了问题。

从添加选项重绘选择以选择焦点 IE9没有区别

使用 jQuery html 和 append 而不是 innerHTML为什么 JQuery 不改变 IE 中的选择选项？

4

1 回答 1

0

问题是事件处理程序正在监视粘贴、鼠标操作、键操作和更改。不知何故使IE感到困惑。从列表中删除“更改”解决了这个问题。无论如何，在这种情况下改变是多余的。

$(document).on('paste mouseup keyup', 'input', function () {
    updateOptions();
});
于 2013-01-30T23:07:16.280 回答