Q:

Hide multiple Dropdown boxs using CSS for printing

On my c# mvc page, I have several dropdown boxs displayed on the page, I'm using media query to render the view differently for print and screen. 
My question is that is there a way (using CSS) to hide ALL the dropdown boxs if the selected option value is "". (the text for that value is '< Select >').
So that when printing, the following will be printed:
Title 

Instead of:
Title < Select >

Just want to make it more clear,
if the selected option is not "" then I do need to display it when printing,
so the following:
Title Mr

will display as the same when printing as:
Title Mr 

Here is one of my dropdown:
<select id="Alias_Title" name="Alias.Title">
    <option value="">< Select ></option>
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
</select>

Don't know whether this is achievable or not with CSS, if not, can it be done by Jquery? 
Thanks

A:

The following solution is a combination of @Satpal and @General-Doomer 's answer to the question.
Script
<script type="text/javascript">
$(function () {
    $('select').filter(function () {
        return $(this).val() == "";
    }).addClass('hidden-print');

    $('select').change(function () {
        if ($(this).val() == "") {
            $(this).addClass('hidden-print');
        } else {
            $(this).removeClass('hidden-print');
        }
    });
});
</script>

CSS class:
.hidden-print{
  display: none !important;
}

The filter() function works for when user try to print the page without touch any of the dropdown boxs.
The change() function works for when user try to print the page after changing the value of dropdown box.

