Question

I am using jQuery to add options to a select element when text is added to an input box.

In FireFox & Chrome, as soon as text is added, the select is updated and clicking on the select once shows the new options as expected. In IE, the default option shows up immediately as you type, but on first click the additional options do not display. On the second click on the select, the new options show up.

How do I get IE to update immediately like Chrome and 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>

The timeout is for the paste event. Sample can be seen at http://jsfiddle.net/c7G6L/4/

I tried several SO solutions:
DIV swap from JQuery – dynamic selects and options not working in IE9 but that just seemed to give the problem to FireFox.

Redrawing the select from adding options to select on focus IE9 made no difference

Using jQuery html and append instead of innerHTML Why doesn't JQuery change select options in IE?

Answer 1

The problem is that the event handler is watching for paste, mouseup, keyup & change. Somehow that confused IE. Removing “change” from the list fixed the problem. Change was redundant in this case anyway.

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