jQuery - Opsomming naar Select


Met het onderstaande stukje code kun je eenvoudig een opsomming (UL LI) omzetten naar een select element. Dit kan bijvoorbeeld van pas komen bij een responsive design om zo het hoofdmenu geschikt te maken voor mobiel. In het onderstaande geval krijgt de nieuwe select een classnaam 'select-box' om bijvoorbeeld de positie te wijzigen.

$(document).ready(function() {
        $(function() {
                $('#mainmenu ul').each(function() {
                        var $select = $('<select class="select-box" onchange="document.location.replace(this.value);">');
                        $(this).find('a').each(function() {
                                var $option = $('<option />');
                                $option.attr('value', $(this).attr('href')).html($(this).html());
                                $select.append($option);
                        });
                        $(this).replaceWith($select);
                });
        });
});