让下拉列表的选项可打印

在打印包含 <select> 元素的网页时，下拉列表会按原样打印。

当然，这在打印页面上几乎毫无用处。它甚至可能隐藏了理解打印页面内容至关重要的重要细节（例如，产品的选项）。

不幸的是，我不知道有任何真正简单且干净的方法来处理这个问题。一种选择是使用无序列表替换所有 select HTML 元素，并复制相同的内容。在常规显示 CSS 中隐藏无序列表，然后在打印样式表中显示它。我认为这是一个合理的方法，除了它一直都是一个很大的麻烦之外。

就像我们经常在这里做的那样，让我们依靠 jQuery 来完成繁重的工作。

1. 循环遍历页面上的每个 select 元素。
2. 在其后面插入一个带有选项 UL 的 DIV。
3. 循环遍历该 select 中的每个选项，并将 LI 追加到 UL 中。
4. 确保 DIV 通常是隐藏的（display: none 即可），并在打印样式表中显示。

$(function(){
        
     $("select").each(function(i){
     
         var $el = $(this);
         var $options = $el.find("option");
         
         $el.after("<div class='print-select'>Options: <ul id=sel"+i+"></ul></div>");
         
         var $curPrintBox = $("#sel"+i);
                         
         $options.each(function() {
             
             $curPrintBox.append("<li>"+$(this).text()+"</li>");
             
         });    
     
     });

 });

 

查看演示

查看演示页面的源代码以查看所有 JavaScript、CSS 和 HTML 代码。

使用 MooTools

David Walsh，一如既往，使用 相同的技术，只不过是用 MooTools 实现的。