Select-Optionen druckbar machen

Wenn eine Webseite mit <select>-Elementen gedruckt wird, wird die Select-Dropdown so gedruckt, wie sie aussieht.

Das ist natürlich auf einer gedruckten Seite grenzwertig nutzlos. Es können sogar wichtige Details versteckt werden, die für das Verständnis des Inhalts der gedruckten Seite entscheidend sind (z.B. Optionen für ein Produkt).

Leider kenne ich keine wirklich einfachen und sauberen Wege, dies zu handhaben. Eine Möglichkeit besteht darin, alle Select-HTML-Elemente mit ungeordneten Listen zu versehen, die denselben Inhalt duplizieren. Verbergen Sie die ungeordneten Listen in Ihrem normalen Anzeige-CSS, aber enthüllen Sie sie dann mit Ihrer Druck-Stylesheet. Das ist meiner Meinung nach ein vernünftiger Ansatz, außer der Tatsache, dass es eine riesige Menge Mühe ist, sich ständig damit zu befassen.

Wie wir das hier so oft tun, verlassen wir uns stattdessen auf jQuery, um die schwere Arbeit zu erledigen.

1. Durchlaufen Sie jedes Select auf der Seite
2. Fügen Sie danach eine DIV mit einer UL für die Optionen ein.
3. Durchlaufen Sie jede Option in diesem Select und fügen Sie LI's zur UL hinzu
4. Stellen Sie sicher, dass die DIV im Allgemeinen verborgen ist (display: none ist in Ordnung) und im Druck-Stylesheet angezeigt wird.

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

 });

 

Demo ansehen

Sehen Sie sich den Quellcode der Demoseite an, um JavaScript, CSS und HTML zusammen zu sehen.

Mit MooTools

David Walsh ist wie immer mit der gleichen Technik nur in MooTools zur Stelle.