css - IE9 不在下拉列表中打印更改的选项

Question

在 IE9 中的一个简单下拉框中，如果用户更改选择然后尝试打印，打印将呈现原始选项。

说，我有

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

默认情况下，当页面加载时，“选择一个:”会显示在此下拉框中。如果我选择“记录 2”，然后打印页面，“选择一个:”将打印在框内，而不是我选择的“记录 2”。

Firefox 可以正确打印。其他版本的 IE 也可以完成这项工作。但我们宁愿不使用兼容性 View :

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

因为在这种情况下，虽然选择的值在下拉框中正确显示，但是我们的很多css样式都丢失了。 (例如边界半径)

谁有好的解决办法？谢谢。

Answer 1

这是一个似乎可以解决问题的粗略函数，它需要在您的环境中进行彻底测试，但目前看来还可以:

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);
                });
            }

基本上，IE 不会让您从选项中删除“selected=selected”属性，即使使用 JavaScript 也是如此。所以我只是将原来的默认选项复制到一个新的选项标签中，而不复制'selected'属性，我将'selected'属性放在新点击的选项上。适用于 FF 和 IE9 & 8。