레이어를 이용한 셀렉트 박스

아래 소스는 제가 퍼블리싱 하면서 만들었던 레이어 셀렉트 박스 소스인데요.

제이쿼리를 이용해서 아주 간단하게 만든것이에요.

기능적으로 조금만 더 추가하면 select tag와 동일하게 사용할 수 있을 거라
생각해요.

제이쿼리와 css를 좀 아시면 금방 해석 가능할 것에요.

$(document).ready(function() {
    ////////////////////////////////////////////////////////////////////////////////////
    //javascript:location.href='#'     <====  # 부분에 url을 넣는다.
    ////////////////////////////////////////////////////////////////////////////////////
    var selecttag = "\
            <div id='choicevalue'><img src=\"/images/engicon.png\" alt=\"ENG\" /></div>\
            <dl>\
                <dd onClick=\"javascript:location.href='#'\"><img src=\"/images/engicon.png\" alt=\"ENG\" width=80 height=20/></dd>\
                <dd onClick=\"javascript:location.href='#'\"><img src=\"/images/koricon.png\" alt=\"KOR\" width=80 height=20 /></dd>\
            </dl>\
    ";
    // GNB
    $(".gnb").append($("<li class=\"end\" id=\"selectmenu\">"+selecttag+"</li>"));    //<=== 이부분에 셀렉트박스 추가



    //////////////////////////////////////////////////////////////////////////////////////////////
    //레이어 셀렉트박스
    //////////////////////////////////////////////////////////////////////////////////////////////
        var defaultheight = 24;
        var defaultwidth = 80;
        var maxheight = defaultheight;
        var top = defaultheight + 4;

        $('#selectmenu').css({'padding':'2px 0','cursor':'pointer','height':defaultheight+'px','width':defaultwidth+'px','color':'#d7d7d7','position':'relative','z-index':'1000'});
        function ShowSelect(){
            $('#choicevalue').css({'clear':'both','padding':'2px 0','height':defaultheight+'px','width':defaultwidth+'px'});        
            
            var ddcnt = $('#selectmenu').children("dl").children("dd").length;
            maxheight = defaultheight * ddcnt;
            $('#selectmenu').children("dl").css({"clear":"both","position":"absolute","left":"0px","top":top+"px","z-index":"10000","height":maxheight+"px","width":defaultwidth+"px",'border':'1px solid #fff','background':'#6d656a'});
            $('#selectmenu').children("dl").children("dd").css({"clear":"both","height":defaultheight+"px","width":defaultwidth+"px"},{'padding':'2px 0px'});
            $('#selectmenu').css({"height":(maxheight+defaultheight+10)+"px"});
        }

        function HideSelect(){
            $('#selectmenu').animate({'height':defaultheight+'px'});    
        }
        $('#selectmenu').mouseenter(function(){
            ShowSelect();
        });

        $("#selectmenu").children("dl").children("dd").click(function(){
            $('#choicevalue').html($(this).html());
            HideSelect();
        });
        $('#selectmenu').mouseleave(function(){
            HideSelect();
        });

        ShowSelect();

        setTimeout(function(){
            HideSelect();
        },2000);
    //////////////////////////////////////////////////////////////////////////////////////////////
});