Make a Select’s Options Printable

When printing a web page with <select> elements on it, the select dropdown prints just like it looks.

This is of course borderline useless on a printed page. It may even be hiding important details vital to understanding what the printed page is about (e.g. options for a product).

Unfortunately I don’t know of any really simple and clean ways of handling this. One option is to succeed all select HTML elements with an unordered lists duplicating the same content. Hide the unordered lists in your regular display CSS, but then reveal it with your print stylesheet. This is a reasonable approach I think, except for the fact that is a big ol’ pain in the butt to deal with all the time.

As we so often do around here, let’s lean on jQuery to do the heavy lifting instead:

1. Loop through each select on the page
2. Insert a DIV after it with an UL for the options.
3. Loop through each option in that select and append LI’s to the UL
4. Make sure the DIV is hidden in general (display: none is fine) and shown in the print sylesheet

$(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>");
             
         });    
     
     });

 });

View Demo

View source of the demo page to see all the JavaScript, CSS, and HTML together.

With MooTools

David Walsh, as always, is right there with the same technique only in MooTools.