使用CSS隐藏多个下拉框以进行打印

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.

在我的c#mvc页面上,我在页面上显示了几个下拉框,我正在使用媒体查询以不同的方式呈现视图以进行打印和屏幕。

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 >').

我的问题是,如果所选的选项值为“”,是否有一种方法(使用CSS)隐藏所有下拉框。 (该值的文本为“

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?

不知道这是否可以用CSS实现,如果没有,可以由Jquery完成吗?

Thanks

4 个解决方案

#1

You can use $.fn.filter() to find all the select whose value is "" then add a hidden class

您可以使用$ .fn.filter()查找值为“”的所有选择,然后添加隐藏类

$(function () {
    $('select').filter(function () {
        return $(this).val() == "";
    }).addClass('hidden');
});

Add a CSS class

添加CSS类

.hidden{
  display: none !important;
}

#2

CSS for print (from BootStrap)

用于打印的CSS(来自BootStrap)

@media print {
  .visible-print-block {
    display: block !important;
  }
}

@media print {
  .hidden-print {
    display: none !important;
  }
}

Elements with hidden-print CSS class are not visible for printing.

具有hidden-print CSS类的元素在打印时不可见。

Code:

<select id="Alias_Title" name="Alias.Title" class="hidden-print">
    <option value="">&lt; Select &gt;</option>
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
</select>

<script type="text/javascript">

        $(function () {
            $('select').change(function () {
                if (!$(this).val()) {
                    $(this).addClass('hidden-print');
                } else {
                    $(this).removeClass('hidden-print');
                }
            });
        });

</script>

#3

Using jquery, you can write like this.

使用jquery,你可以像这样写。

if($('#Alias_Title').val().length == 0) { // int value
    $('#Alias_Title').hide();
 }

#4

The following solution is a combination of @Satpal and @General-Doomer 's answer to the question.

以下解决方案是@Satpal和@ General-Doomer对该问题的回答的组合。

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.

filter()函数适用于用户尝试打印页面而不触摸任何下拉框的情况。 change()函数适用于用户在更改下拉框的值后尝试打印页面时。

#1