셀렉트 박스 꾸미기 - select

http://oxtag.com/html/ex/selectbox/selectbox/selectbox20070510.html

<title>셀렉트박스 꾸미기</title>
<script>
//셀렉트박스 꾸미기 v1.2
//================================================ JS
var zindex = 10000;
select_count = new Array();
ev_click     = new Array();

function insert_select ( sn,w,f,b,g,c,img,event) {
ev_click[sn]    = event;
select_count[sn] = 0;
zindex--;
document.write("<input type=hidden name="+sn+" id="+sn+" value=''>");
document.write("    <table border='0' cellspacing='1' cellpadding='1' width='"+w+"'  style='table-layout:fixed;width:"+w+";' bgcolor='"+b+"' onclick='select_click(\""+sn+"\");' >");
document.write("    <tr>");
document.write("        <td bgcolor='"+g+"'>");
document.write("            <input type='text' id='"+sn+"_select_name' name='"+sn+"_select_name' style='border:none;cursor:hand;width:100%;font-size:"+f+"pt;' onselectstart=\"return false\" readonly> ");
document.write("        </td>");
if(img != "") {
document.write("    <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'><img src='"+img+"' align='absmiddle'></td>");        
} else {
document.write("    <td width=18 bgcolor='"+g+"' align=center valign=bottom style='cursor:hand'>▽</td>");
}
document.write("    </tr>");
document.write("    </table>");

document.write("<div id='"+sn+"_select_div' name='"+sn+"_select_div'  style='display:none;z-index:"+zindex+";position:absolute;cursor:hand'  onmouseover='"+sn+"_select_div.style.display=\"\";' onmouseout='"+sn+"_select_div.style.display=\"none\";'>");
document.write("        <table border='0' cellspacing='1' cellpadding='1' bgcolor='"+b+"' width="+w+" onmouseover='"+sn+"_select_div.style.display=\"\";'>");
document.write("        <tr><td bgcolor='"+g+"' style='line-height:1.3em;' id='"+sn+"_select_span'></td></tr>");
document.write("        </table>");
document.write("    </div>");
}

function insert_select_option(sn,f,b,g,c,v,vv,chk)     {    
select_count[sn] ++;    
option_html = "<span style='width:100%;font-size:"+f+"pt' onclick='"+sn+"_select_name.value=\""+vv+"\";"+sn+".value=\""+v+"\";"+sn+"_select_div.style.display=\"none\";"+ev_click[sn]+";' onmouseover='this.style.background=\""+c+"\"' onmouseout='this.style.background=\""+g+"\"'>"+vv+"</span><br>";

if(select_count[sn] == 1 || chk == "Y" ) {
document.getElementById( sn+"_select_name" ).value = vv
document.getElementById( sn).value = v
}
document.getElementById( sn+"_select_span").innerHTML += option_html;
}

function  select_click(sn)     {    
if ( document.getElementById( sn+"_select_div").style.display == "none") {
document.getElementById( sn+"_select_div").style.display = "";
} else {
document.getElementById( sn+"_select_div").style.display = "none";
}
}
////================================================ JS
</script>

<table>
<tr>
<td>

<script>
////================================================ 사용
//insert_select(저장변수명,가로,폰트크기,보드색,배경색,선택색,화살표이미지);
insert_select("test3","70","8","F6D8B0","FFFFFF","F6D8B0","");

//insert_select_option(저장변수명,폰트크기,보드색,배경색,선택색,value,view_value,초기선택여부:(Y선택);
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","1","1번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","2","2번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","3","3번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","4","4번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","5","5번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","6","6번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","7","7번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","8","8번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","9","9번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","10","10번");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","11","11번","Y");
insert_select_option("test3","8","F6D8B0","FFFFFF","F6D8B0","12","13번");
////================================================ 사용
</script>    

</td>
<td>

<input type="button" onclick="alert(document.all.test3.value);" value="테스트">

</td>
</tr>
</table>