如何使用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做出選擇看起來像普通的文本

回答

相關問題