Question

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

我的问题是，如果所选的选项值为＆＃34;＆＃34;，有一种方法（使用CSS）隐藏所有下拉框。（该值的文字是＆＃39;＆lt; Select＆gt;＆＃39;）。

这样在打印时，将打印以下内容：

Title

而不是：

Title < Select >

只是想让它更清晰，

如果所选的选项不是＆＃34;＆＃34;然后我需要在打印时显示它，以下是：

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

您可以使用$.fn.filter()查找其值为＆＃34;＆＃34;的所有选择然后添加一个隐藏的类

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

添加CSS类

.hidden{
  display: none !important;
}

Answer 2

CSS for print（来自BootStrap）

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

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

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

代码：

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

使用jquery，你可以这样写。

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

Answer 4

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

脚本

grunt.registerTask('default',['less']);

CSS课程：

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

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

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

4 个答案: