Html 如何使用print.css使选定内容看起来像普通文本

我有一个显示以下内容的网页：

这背后的Html是：

<label>Approved For Payment:</label>

    <select id="Invoice_ApprovedForPayment" class="dropdownapprovedforpayment" name="Invoice.ApprovedForPayment" lineid="299" disabled="disabled">
    <option value="null" selected="selected">Please Approve</option>
    <option value="true">Accepted</option>
    <option value="false">On Hold</option>
    </select>

已批准付款：
请批准
认可的
暂停

---

当前，当打印此页面时，请批准显示如图所示。如中所示，将其打印为选择下拉列表。这是有道理的，但我希望我能以某种方式得到它，这样当它打印出来时，它会看起来像一个正常的标签，等等？我想这可能是使用print.css实现的？有人能告诉我如何实现这一点吗？

我认为实现这一点的最简单方法是创建一个范围，该范围隐藏在选择列表旁边的

屏幕中。css

，当您更改选择列表中的值时，更新范围的值。在

print.css中，显示span并隐藏select元素

Javascript


<script type="text/javascript">
  $(document).ready(function() {
    $("#Invoice_ApprovedForPayment").change(function() {
      $("#Invoice_ApprovedForPaymentSpan").val($(this).val());
    });
  });
</script>

screen.css

只需确保打印样式表的介质设置为“打印”

如果尚未在内容文件夹下创建Print.css
将此行添加到_Layout.cshtml

添加select{yourStyle}到Print.css，用所需样式替换yourStyle
注意，IE9似乎忽略了打印媒体样式表，至少打印预览是这样。这在铬上很好用。没有测试过其他人

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

在Chrome和Firefox上运行良好。
这里是另一个使用jQuery的解决方案，无需手动添加所有选择的范围

<script type="text/javascript">
$(document).ready(function(){
    $(window).bind('beforeprint', function(){
        $('select').each(function(){
            $(this).after($('<span class="select-print">' 
                + $(this).find('option:selected').text() + '</span>'));
        });
    });
    $(window).bind('afterprint', function(){
        $('.select-print').remove();
    });
})
</script>
<style>
@media print {
    select { display:none }
}
</style>


$（文档）.ready（函数（）{
$（window）.bind（'beforeprint'，function（）{
$（'select'）。每个（函数（）{
$（本）。在（$）之后
+$（this.find（'option:selected'）.text（）+“”）；
});
});
$（窗口）.bind（'afterprint'，函数（）{
$（'.select print'）.remove（）；
});
})
@媒体印刷品{
选择{显示：无}
}
使用JQuery为每个
添加一个
块，该块在
后仅在打印时显示

    // Build <ul> for our select
    var inputfield = "select.print_this_select";  // process one or more selects (use "select" for all)
    $(inputfield).addClass('printable-select');  // Hide select
    $(inputfield).each(function() {   // Add our <ul>
        var ul = $('<ul></ul>').addClass('print-select');  // only show it on print
        $(this).find("option").each(function() {
            text = $(this).text();
            if ('Please Approve' != text)   // Skip "instruction" option
                ul.append("<li>" + text + "</li>");
        });    
        $(this).after(ul);
    });

//为我们的选择构建

var inputfield=“select.print\u this\u select”//处理一个或多个选择（对所有选择使用“选择”）
$（inputfield）.addClass（'printable-select'）；//隐藏选择
$（inputfield）.each（function（）{//添加我们的

var ul=$（'
'）。addClass（'print-select'）；//仅在打印时显示
$（this.find（“option”）.each（function（）{
text=$（this.text（）；
如果（'请批准'！=text）//跳过“说明”选项
ul.附加（“
”+文本+“
”）；
});    
美元（本）。在（ul）之后；
});

CSS:

/*隐藏原始内容并显示新内容
*/
@媒体印刷品{
.可打印选择{
显示：无；
}
}
.打印选择{
/*在需要时隐藏我们的
*/
显示：无；
@媒体印刷品{
/*在印刷品上展示我们的
*/
显示：块；
}
}
Cool，但我认为应该让它工作，而不是美元（“#发票_ApprovedForPaymentSpan”）.val（$（this.val（））；我需要美元（“#发票_ApprovedForPaymentSpan”）.text（$（this.text（））；啊，打得好。我完全把它看作是一种
输入
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

<script type="text/javascript">
$(document).ready(function(){
    $(window).bind('beforeprint', function(){
        $('select').each(function(){
            $(this).after($('<span class="select-print">' 
                + $(this).find('option:selected').text() + '</span>'));
        });
    });
    $(window).bind('afterprint', function(){
        $('.select-print').remove();
    });
})
</script>
<style>
@media print {
    select { display:none }
}
</style>

$(document).ready(function()
{
    $('select').each(function()
    {
        val = $(this).find('option:selected').val();
        $(this).prev().html(val);
    });
});

    // Build <ul> for our select
    var inputfield = "select.print_this_select";  // process one or more selects (use "select" for all)
    $(inputfield).addClass('printable-select');  // Hide select
    $(inputfield).each(function() {   // Add our <ul>
        var ul = $('<ul></ul>').addClass('print-select');  // only show it on print
        $(this).find("option").each(function() {
            text = $(this).text();
            if ('Please Approve' != text)   // Skip "instruction" option
                ul.append("<li>" + text + "</li>");
        });    
        $(this).after(ul);
    });

/* Hide the original <select> and reveal our new <ul> */
@media print {
    .printable-select {
        display: none;
    }
}

.print-select {
    /* Hide our <ul> until needed */
    display: none;
    
    @media print {
        /* Reveal our <ul> on print */
        display: block;
    }
}