Old Site

This site is archived. I now update and maintain my blog here.

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';

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


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


Leave a comment