Question

我不知道为什么，但是当我点击打印按钮时，打印预览总是显示标签选择选项上的第一个选项

作为一个例子： testingprint.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<div id="printing">
    <table>
        <tr>
            <td>
                <select>
                <option>-</option>
                    <option>A</option>
                    <option>B</option>
                </select>
            </td>
            <td><input type="button" onclick="printPage('printing')"/></td>
        </tr>        
    </table>
</div>
</body>
</html>

这里是javascript： java.js

<script type="text/javascript">
function printPage(id)
{ 

   var html="<html>";
   html+="<head>";
   html+="</head>";
   html+= document.getElementById(id).innerHTML;
   html+="</html>";

   var printWin = window.open('','','left=0,top=0,width=1024,height=768,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();

}

</script>

为什么打印预览始终显示该选项仍然是“ - ”，即使我选择选项“A”或其他选项？

有人能给我一些建议吗？或者我应该用什么打印脚本？

如果我使用print（）函数，它会打印整个页面，我只想打印我选择的内容

感谢您的帮助，

Answer 1

更改选择框的值并不会真正改变dom树。你可以强迫它改变dom树。只需在选择

的onchange中添加一些javascript即可

 <select onchange="this.options[this.selectedIndex].setAttribute('selected','selected');">
     <option>-</option>
     <option>A</option>
     <option>B</option>
 </select>

innerHTML将为<option selected="selected">A</option>

Answer 2

为<select>元素提供id属性：

<select id="select1">
    ...
</select>

并使用此Javascript：

function printPage(id) { 
    var selectedIndex = document.getElementById("select1").selectedIndex;
    var html = "<html>";
    html += "<head></head>";
    html += "<body>";
    html += document.getElementById(id).innerHTML;
    html += "<script type='text/javascript'>";
    html += "document.getElementById('select1').selectedIndex = " + selectedIndex + ";";
    html += "<\/script>";
    html += "</body>";
    html += "</html>";

    var printWin = window.open('','','left=0,top=0,width=1024,height=768,toolbar=0,scrollbars=0,status  =0');
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}

DEMO： http://jsfiddle.net/bkHC2/1/

当您使用.innerHTML获取元素的内容时，不会复制其当前“状态”。所以我快速“修复”的方法就是将Javascript放在新窗口中，将selectedIndex元素的<select>设置为主页面上的当前元素。

请注意，我在<body>变量中添加了html元素。

从标签选择选项打印值

2 个答案: