如何使用print.css将下拉框呈现为普通文本？

Question

我有一个网页显示这个：

这个的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>

当前，当打印此页面时，“Please Approve”会像所示一样显示为下拉选择列表。这是有道理的，但我希望能够以某种方式使其在打印时看起来像普通标签、span等。我在想是否可以使用print.css实现？有人能告诉我如何实现吗？

- AnonyMouse

Answer 1

我能想到最简单的方法是在 screen.css 中创建一个隐藏的 span，放在选择列表旁边，在选择列表中更改值时，更新 span 的值。在您的 print.css 中显示 span 并隐藏选择元素。

Javascript

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

HTML

<select id="Invoice_ApprovedForPayment" class="dropdownapprovedforpayment noprint" 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>
<span id="Invoice_ApprovedForPaymentSpan" class="noscreen"></span>

CSS

print.css

.noprint { display: none; }
.noscreen { display: inline; }

screen.css

.noprint { display: inline; }
.noscreen { display: none; }

确保您的打印样式表媒体类型设置为打印

- Anthony Shaw

---

很酷，我认为为了使其工作，我需要使用$("#Invoice_ApprovedForPaymentSpan").text($(this).text());而不是$("#Invoice_ApprovedForPaymentSpan").val($(this).val()); - AnonyMouse

啊，好主意。我完全把它想成了一个“输入”。 - Anthony Shaw

Answer 2

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

在Chrome和Firefox上工作良好。

- Chris Cinelli

Answer 3

这里有另一种使用jQuery的解决方案，无需手动添加所有选择器的span。

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

- retrospectacus

Answer 4

1. 如果你还没有，在Content文件夹下创建Print.css文件。
2. 在_Layout.cshtml文件中添加以下代码：<link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
3. 在Print.css文件中添加 select { yourStyle }，将yourStyle替换为你想要的样式。

注意，IE9似乎忽略打印媒体样式表，至少在打印预览中是如此。在Chrome中可以正常工作，其他浏览器未经测试。

- Stuart

Answer 5

使用 JQuery 在打印时添加一个仅显示的 <select> 后面的每个 <option> 的 <li> 块的 <ul>。

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

CSS：

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

- GregH

Answer 6

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

- Filipe Mansano