CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerinternet-explorer-9
Patrick Lee Scott
Patrick Lee Scott

Reputation: 8699

adding options to select on focus IE9

I'm trying to lazy load options into a select with jquery. This code works in all browsers I've tested except IE9. (IE7, IE8, FF, Chrome all work)

function LazyLoadOptionsIntoSelect($select, options) {
        //get current option
        var selectedOptionVal = $select.val();
        var selectedOptionDisplay = $select.find("option:selected").text();

        //repopulate options
        if (selectedOptionDisplay === "--Select a File--"
                || selectedOptionDisplay === "----------") {
            $select.html("");

            $("<option>").val("").text("--Select a File--")
                        .appendTo($select);
        }
        else {
            $select.html($("option:selected", $select));
            $("<option>").val("").text("----------")
                        .appendTo($select);
        }
        $.each(options, function () {
            var item = this;
            $("<option>").attr("name", function () { return item.display; })
                    .val(item.value)
                    .text(item.display)
                    .appendTo($select);
        });

        //select previous val
        $select.val(selectedOptionVal);
    }

    $(document).on("focus", ".html-select", function () {
        LazyLoadOptionsIntoSelect($(this), HtmlOptions);
    });
    $(document).on("focus", ".txt-select", function () {
        LazyLoadOptionsIntoSelect($(this), TxtOptions);
    });
    $(document).on("focus", ".xml-select", function () {
        LazyLoadOptionsIntoSelect($(this), XmlOptions);
    });

I've been trying to solve this for hours but nothing is working.. any solutions or do I need to write a different way to load options in IE9?

options is an array of objects containing value, and display.

This works in simpler use cases, but this apparently is too much for Microsoft to handle. <_<

Upvotes: 1

Views: 855

Answers (1)

Patrick Lee Scott
Patrick Lee Scott

Reputation: 8699

After hours of fiddling, I tried changing the css to see if redrawing the element worked. It did.

$(document).on("focus", ".html-select", function () {
        LazyLoadOptionsIntoSelect($(this), HtmlOptions);
        if ( $("body").hasClass("ie9") )
        {
            $(this).width($(this).width());
        }
    });

Upvotes: 1

Related Questions