Question

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

在FireFox＆amp; 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从JQuery - dynamic selects and options not working in IE9交换，但这似乎给FireFox带来了问题。

重新绘制adding options to select on focus IE9中的选择没有区别

使用jQuery html并追加而不是innerHTML Why doesn't JQuery change select options in IE?

Answer 1

问题是事件处理程序正在监视粘贴，鼠标，密钥和＆amp;更改。莫名其妙地混淆了IE。从列表中删除“更改”修复了问题。无论如何，在这种情况下改变是多余的。

$(document).on('paste mouseup keyup', 'input', function () {
    updateOptions();
});

如何在IE中没有第二次单击的情况下动态添加选项以选择元素

1 个答案: