Skip to content Skip to sidebar Skip to footer
Home / Ajax / Javascript

Add Options To Select Box Without Internet Explorer Closing The Box?

Post a Comment
I'm trying to build a web page with a number of drop-down select boxes that load their options asynchronously when the box is first opened. This works very well under Firefox, but

Solution 1:

Have you considered calling the loadOptions method in the onblur event of one of the other interrelated fields on the form? This would load the list into the drop down box before it is clicked, but the behavior should still be similar.

I think you are going to have explore slightly different options to obtain what you want as you are probably stuck with Internet Explorer closing that drop down list if you use the onmousedown or onclick events. Another downside to using those events is if the user uses the keyboard to select the fields, your method may never get called.


Solution 2:

I would suggest to load the contents of the selects that don't depend on any other select boxes on page load. Then in the onchange event of those selects load the contents of the rest of the selects that depend on them.

Your idea is sound from a programming point of view, but you will get that lag between clicking on the select and it being populated with all the options which from the user's point of view looks kind of sloppy.


Solution 3:

I found a solution to this, the problem seems to lie in IE's implementation of onclick, hover, mouseover etc. After the items are added to the dropdown, the dropdown closes. If you instead of providing the method in the select attribute, let jquery add the function at runtime it works. 

$(function() {
    jQuery(".selectBox").live("focus", function() {
       loadOptions();
     });
});

The whole page:

<html>
<head>
    <script src="jquery-latest.js" type="text/javascript"/>
</head>
<body>
    <select id="selectBox" onmousedown="loadOptions();">
        <option>Any</option>
    </select>
    <script type="text/javascript">
        $(function() {
            jQuery(".selectBox").live("focus", function() {
                loadOptions();
            });
        });
        function appendOption(select, option) {
            try {
                selectBox.add(option, null); // Standards compliant.
            } catch (e) {
                selectBox.add(option);      // IE only version.
            }
        }

        function loadOptions() {
            // Simulate an AJAX request that will call the
            // loadOptionsCallback function after 500ms.
            setTimeout(loadOptionsCallback, 500);
        }

        function loadOptionsCallback() {
            var selectBox = document.getElementById('selectBox');
            var option = document.createElement('option');
            option.text = 'new option';
            appendOption(selectBox, option);
        }
    </script>
</body>


Post a Comment for "Add Options To Select Box Without Internet Explorer Closing The Box?"