셀렉트 박스 꾸미기 - select

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