gpt4 book ai didi

javascript - 单击“打印”按钮时,不会打印“选择”选项中的值

转载 作者:行者123 更新时间:2023-12-02 21:43:45 27 4
gpt4 key购买 nike

我编写了一个 JavaScript 按钮来打印页面中的所有 HTML。当我单击相同的内容时,除了选择时的 option 值之外,所有内容都打印正常。下面是代码片段。

问题的现场演示:

https://codepen.io/T9-T9/pen/VwLKbOv

因此,在演示中,如果您将选项从“a”更新为“b”或其他,然后单击“打印结果”,它仍然会打印默认的“a”,而不是您选择的内容。代码片段如下。

HTML:

<div class="container" id="printcontent">
<div class="row">
<div>
<h4>Title here</h4>
<form>
<fieldset>
<label class='life_area'>01</label>
<select id='01'>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
<label class='life_area'>02</label>
<select id='02'>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
</fieldset>
</form>
</div>
</div>
</div>
<div id="print-content">
<form>
<input type="button" class="print-result" onClick="PrintElem('print-content')" value="print result"/>
</form>
</div>

JavaScript:

function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=800,width=2200');

mywindow.document.write('<html><head>');
mywindow.document.write('</head><body>');
mywindow.document.write(document.getElementById('printcontent').innerHTML);
mywindow.document.write('</body></html>');

mywindow.document.close();
mywindow.focus();

setTimeout(function () {
mywindow.print();
mywindow.close();
}, 1000)
return true;
}

我进行了多次更新,但无法修复此部分。

最佳答案

元素的 innerHTML检索 HTML 标记 - 它不会检索可能不在 HTML 中的元素的状态。例如,当选择更改时,不会更改 HTML 标记。 (同样,将文本放入输入框中也不会,添加事件监听器也不会)。

在这种情况下,您可以遍历选定的选项,并为它们提供selected 属性,该属性将反射(reflect)在 HTML 标记中(因此检索适本地)。 selected 属性将导致在页面加载时选择相关选项:

for (const option of document.querySelectorAll('option:checked')) {
option.setAttribute('selected', '')
}
mywindow.document.write(document.getElementById('printcontent').innerHTML);

关于javascript - 单击“打印”按钮时,不会打印“选择”选项中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60313118/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com