Quick tip: jQuery to replace lists with selects when your lists are getting long

My list of archived content by month in the right hand side navigation of this page was getting a little long. The following jQuery script replaces the un-ordered list with a select input which takes up much less page real estate.

The page still looks the same to any passing search engines though.

var archiveContent = '';

$("li[class='archive']").each(function() {
    archiveContent += '<option value="'+$('a:first', this).attr('href') 
        +'">'+$('a:first', this).html()+'</option>\n';
    $(this).remove();
});

archiveContent = '<li>\n<form id="archiveForm"><select 
    id="archiveSelect">\n'+archiveContent;
archiveContent += '</select><input type="submit" value="go" 
    class="submit" id="archiveSubmit"/></form></li>';

$('#archiveHeader').after(archiveContent);

$('#archiveSubmit').click(function() {
    window.location.href = $('#archiveSelect').val();
    return false;
});

Comments

Leave a comment