选择元素在打印中显示为标签

Question

I have a web page,
I give an option to print it using js function window.print()

the page also also contains <select> element,
I want to print the select list appears as Label,
I know I have to use with:

@media print
{
}

But how do I define it,

Answer 1

You got to have two identical element in your page

1. SELECT element - which is visible on media screen and hidden on media print
2. Label/Div element - which will contain the selected value, and will be visible in media print and hidden in media screen

For example:

<SELECT class='noPrint'><OPTION></OPTION></SELECT>
<DIV class='Print'>[selected value of SELECT element]</DIV>

@media print 
{
    .noPrint 
    {
        display:none;
    }
    .Print 
    { 
        display:inline-block;  
    }
}

See here for definition of media types