Scott Cariss

// Check when ready
$(function() {

    // Find dropdowns
    $("select.dropdownreplace").each(function() {replaceDropDown(this);});
    // If document clicked anywhere hide drop downs
    $(document).click(function(event){
        $("div.dropdownreplace ul").hide();
    });

});

function replaceDropDown(that) {
    // Create HTML for new drop down
    // hidden field
    var hiddeninput = $('<input name="'+$(that).attr("name")+'" type="hidden" value="'+$(that).val()+'" />');
    // div
    var dropdowndiv = $('<div id="dropdownreplacement_'+$(that).attr("name")+'" class="dropdownreplace"><span>'+$(":selected", that).text()+'</span><ul></ul></div>');

    // loop through values and make li's
    $("option", that).each(function() {
        $("ul", dropdowndiv).append('<li><span>'+$(this).val()+'</span><a href="#">'+$(this).text()+'</a></li>');
        // set click handler for this drop down
        $(dropdowndiv).click(function() {
            $("ul", this).show();
            return false;
        });
        // set click handler for link items
        $("a", dropdowndiv).click(function() {
            // Get name of hidden input
            var nameofdropdown = $(this).parent().parent().parent().attr('id');
            var nameofinput = nameofdropdown.replace("dropdownreplacement_", "");
            // set hidden input value to whats been clicked
            $("[name='"+nameofinput+"']").val($(this).parent().find("span").text());
            // set div
            $("div#"+nameofdropdown+" > span").text($(this).text());
            $("div#"+nameofdropdown+" ul").hide();
            return false;
        });
    });

    // Remove drop down then add in replacement html
    $(that).delay(1000).after(hiddeninput);
    $(that).delay(1100).after(dropdowndiv);
    $(that).delay(1200).remove();
}