Question

In a simple dropdown box in IE9, if the user changes the selection and then tries to print, the print will render the original option.

Say, I have

<option value="">Select one: </option>
<option value="1">Record 1</option>
<option value="2">Record 2</option>
<option value="3">Record 3</option>

By default, when the page is loaded, “Select one:” is displayed in this dropdown box. If I pick “Record 2”, and then print the page, “Select one:” is printed out inside the box instead of “Record 2” which I have selected.

Firefox can print correctly. Other versions of IE can also do the job. But we would rather not use the compatibility view:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Because in this case, though the selected value is correctly displayed inside the drop down box, many of our css styles are lost. (such as border-radius)

Does anyone have a good solution? Thanks.

Answer 1

Here’s a rough function that seems to do the trick, it needs to be tested thoroughly in your environment but seems to be OK at the moment:

if ($.browser.msie && parseInt($.browser.version, 10) === 9) {
                $("select").change(function () {
                    var selectedOpt = $(this).find("option:selected");
                    var originalDefaultOption = $(this).find("option[selected]");
                    var text = originalDefaultOption.html();
                    var val = originalDefaultOption.val();

                    originalDefaultOption.after("<option value='" + val + "'>" + text + "</option>");
                    originalDefaultOption.remove();
                    selectedOpt.attr("selected", true);
                });
            }

Basically, IE won’t let you remove the ‘selected=selected’ attribute from the option, even with JavaScript. So I’m just copying the original default option into a new option tag, without copying the ‘selected’ attribute, and I’m putting the ‘selected’ attribute on the newly clicked option. Works in FF and IE9 & 8.