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

Question

在我的 c# mvc 页面上，我在页面上显示了几个下拉框，我使用媒体查询为打印和屏幕呈现不同的视图。

我的问题是，如果所选选项值为“”，是否有一种方法（使用CSS）隐藏所有下拉框。（该值的文本是“< Select >”）。

这样在打印的时候，会打印出如下内容：

Title

而不是：

Title < Select >

只是想说得更清楚，

如果选择的选项不是“”那么我需要在打印时显示它，所以如下：

Title Mr

打印时显示为：

Title Mr

这是我的下拉菜单之一：

<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>

不知道用CSS能不能实现，如果不能用Jquery能不能实现？

谢谢

Answer 1

使用jquery，可以这样写

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

Answer 2

您可以使用$.fn.filter()找到所有值为“”的select然后添加一个隐藏的class

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

添加一个CSSclass

.hidden{
  display: none !important;
}

Answer 3

CSS 打印（来自 BootStrap）

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

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

具有 hidden-print CSS class 的元素无法打印。

代码：

<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>

Answer 4

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

脚本

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

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

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

Hide multiple Dropdown boxs using CSS for printing

css

c#

jquery

media-queries