如何使用print.css做出选择看起来像普通的文本

enter image description here

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？任何人都可以告诉我如何实现这一目标？

来源

2012-01-19 AnonyMouse

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

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

只要确保您的打印样式表的媒体被设置为打印

来源

2012-01-19 20:06:42

酷，我想使它的工作，虽然不是$（ “＃Invoice_ApprovedForPaymentSpan”）VAL（$（本）.VAL（））。我需要$（“＃Invoice_ApprovedForPaymentSpan”）。text（$（this）.text（））; – AnonyMouse

啊，好电话。我完全认为它是一个'输入' –

创建打印。如果您还没有使用Content文件夹，请使用css
将此行添加到_Layout.cshtml <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
将select {yourStyle}添加到Print.css中，用您想要的样式替换yourStyle。

请注意，IE9似乎忽略了打印介质样式表，至少打印预览的确如此。这在铬中工作正常。没有测试过别人。

来源

2012-01-19 21:31:00 Stuart

关心评论投票？ – Stuart

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

适用于Chrome和Firefox。

来源

2013-09-03 22:54:18

这是另一种使用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>

来源

2014-11-26 19:33:09 retrospectacus

-1

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

来源

2015-10-15 20:32:46

如何使用print.css做出选择看起来像普通的文本

回答

相关问题