Javascript 单击“打印”按钮时，不会打印“选择”选项中的值_Javascript_Html

Javascript 单击“打印”按钮时，不会打印“选择”选项中的值

javascript html

Javascript 单击“打印”按钮时，不会打印“选择”选项中的值,javascript,html,Javascript,Html,我编写了一个javascript按钮来打印页面中的所有HTML。当我点击同一个按钮时，除了select上的选项的值外，所有打印都很好。下面是代码片段该问题的现场演示： <div class="container" id="printcontent"> <div class="row"> <div> <h4>Title here</h4> &

我编写了一个javascript按钮来打印页面中的所有HTML。当我点击同一个按钮时，除了select上的

选项

的值外，所有打印都很好。下面是代码片段

该问题的现场演示：

<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>

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

因此，在演示中，如果您将选项从“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>

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


标题在这里
01
A.
B
C
D
02
A.
B
C
D

JavaScript:

<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>

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

函数PrintElem（elem）
{
var mywindow=window.open（“”，'PRINT'，'height=800，width=2200'）；
mywindow.document.write（“”）；
mywindow.document.write（“”）；
mywindow.document.write（document.getElementById（'printcontent'）.innerHTML）；
mywindow.document.write（“”）；
mywindow.document.close（）；
mywindow.focus（）；
setTimeout（函数（）{
mywindow.print（）；
mywindow.close（）；
}, 1000)
返回true；
}

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

元素的

innerHTML

将仅检索HTML标记-它不会检索可能不在HTML中的元素的状态。例如，当select更改时，不会更改HTML标记。（类似地，既不将文本放入输入框，也不添加事件侦听器）

在这种情况下，您可以迭代选择的选项，并为它们提供

selected

属性，该属性将反映在HTML标记中（因此可以正确地检索）。

selected

属性将导致在pageload上选择相关选项：

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

谢谢你的回答和解释。当我添加代码时，它显示了一个错误。不知道为什么。我在

select

标记上添加了

onChange=“this.options[this.selectedIndex].setAttribute（'selected'，'selected'）；”

代码，效果很好。谢谢你的努力+同样的，我试过了，效果很好。它给您带来了什么错误？它在编辑器上抛出了一个错误，代码行变为红色，并要求我纠正相同的错误以使其正常工作。我使用Dreamweaver。如果你的编辑器不理解ES2015语法，你应该强烈考虑升级编辑器2015是一个永无止境的Web开发术语。为了支持过时的浏览器，最好的策略是使用最新和最好的语言版本编写，然后使用转换到ES5进行生产。