Contenido

Muestra los select cuando imprimas páginas

7 Sep

+ 2

Via CSS-Tricks.com descubro una técnica basada en Javascript que permite hacer que los elementos <select /> muestren su contenido desplegado y visible para la versión para imprimir.

select-printable
(Ver Imagen)

Código

$(function(){
     // Todo los elementos <select />
     $("select").each(function(i){

        var $el = $(this);

        // Cogemos todos los elementos <option />
        var $options = $el.find("option");

        // Añadimos un <div /> y el listado de opciones en <ul />
        $el.after("<div class='print-select'>Options: <ul id=sel"+i+"></ul></div>");

        var $curPrintBox = $("#sel"+i);

        // Añadimos las opciones en forma de lista.
        $options.each(function() {
          $curPrintBox.append("<li>"+$(this).text()+"</li>");
        });
    });
 });

Este código, se encarga de generar un listado con las opciones del <select /> en forma de lista como podemos ver en la imagen superior. Podeis ver una demo funcionando.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.