QT그리고···

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>

미리보기 : http://oxtag.com/html/ex/select20070412.html

<script type="text/javascript" language="javascript">
<!--
function selectChg(val) {
document.getElementById('test').value = val;
}
//-->
</script>

<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>

<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>


또는..

<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
document.getElementById('test').options[val].selected = true;
}
//-->
</SCRIPT>

<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>

<a href="javascript:selectChg('0');">한국</a>
<a href="javascript:selectChg('1');">일본</a>
<a href="javascript:selectChg('2');">중국</a>
<a href="javascript:selectChg('3');">호주</a>

또는

<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
  if (f.options[i].value == val) { f.options[i].selected = true; }
}
}
//-->
</SCRIPT>

<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>

<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>

또는

<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChg(val) {
var f = document.getElementById('test');
for (i=0; i<f.options.length; i++) {
  if (f[i].value == val) { f.selectedIndex = i; break;}
}
}
//-->
</SCRIPT>

<select id = "test" name = "test">
<option value="한국" selected="selected">한국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
<option value="호주">호주</option>
</select>

<a href="javascript:selectChg('한국');">한국</a>
<a href="javascript:selectChg('일본');">일본</a>
<a href="javascript:selectChg('중국');">중국</a>
<a href="javascript:selectChg('호주');">호주</a>

<P>select 태그 예제
  <SELECT>
    <OPTGROUP LABEL="select1">  //option 을 그룹지움
      <OPTION value="option1-1">option1-1</OPTION>
      <OPTION value="option1-2">option1-2</OPTION>
      <OPTION value="option1-3">option1-3</OPTION>
      <OPTION value="option1-4">option1-4</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="select2">
      <OPTION value="option2-1">option2-1</OPTION>
      <OPTION value="option2-2">option2-2</OPTION>
      <OPTION value="option2-3">option2-3</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="select3">
      <OPTION value="option3-1">option3-1</OPTION>
      <OPTION value="option3-2">option3-2</OPTION>
      <OPTION value="option3-3">option3-3</OPTION>
      <OPTION value="option3-4">option3-4</OPTION>
      <OPTION value="option3-5">option3-5</OPTION>
      <OPTION value="option3-6">option3-6</OPTION>
    </OPTGROUP>
  </SELECT>
</P>

<html>
<head>
<title>제목없음</title>

<style type="text/css">
<!--
body  { margin:0px; overflow:hidden; background-color:#f4f4f4; color:#000000; font-family:Arial,Helvetica; font-size:10px; }
.dropb {
        font:  normal 9px Small Fonts, VT100, Arial, Helvetica;
        color: #505050;
        border:2px solid #000000;
        width: 115px;
}
--></style>
</head>
<body>

<div style="position:relative;margin-right:7px;width:117px;height:18px;border:1px solid #000000;background-color:#FFFFFF">
<div style="position: absolute;left:0px;top:-1px;width:115px;height:17px;clip:rect(2,113,15,2);">
<SELECT class="dropb">
<option value="" SELECTED>FRIENDLY LINKS
<option value="">- - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="http://www.webarkstudio.com">WEBARKSTUDIO
<option value="http://www.copyrightmagazine.com">COPYRIGHTMAGAZINE
<option value="http://www.publircidad.com">PUBLIRCIDAD
<option value="http://www.e-site-es.com">E-SITE
<option value="http://www.creatiu.com">CREATIU
<option value="http://www.offf.org">OFFF
</select>
</div>
</div>

</body>
</html>

http://oxtag.com/zboard/zboard.php?id=js&no=439

<form name="qform">
<select name="qsel" onfocus="stop_roll();" onmouseover="stop_roll();" onclick="flag_expand = 'Y';" onblur="flag_expand = 'N'; start_roll();" onmouseout="start_roll();" onchange="eval(this.value); this.blur();">
<option>-선 택-</option>
<option value="window.open('http://www.empas.com/');">엠파스</option>
<option value="window.open('http://www.naver.com/');">네이버</option>
<option value="window.open('http://www.daum.net/');">다음</option>
<option value="alert('My name is Camelot. ^-^ㆀ'); alert('Nice to meet you!');">Who are you?</option>
<option value="document.body.style.background = '#AAAAAA';">배경색 바꾸기</option>
<option value="document.body.style.background = '';">배경색 원래대로</option>
</select>
</form>

<script language="javascript">
<!--
var obj = document.qform.qsel, flag_expand = 'N', cnt = 1, timer;

function start_roll(){
var color_=new Array('#ff9900','#33CC00');
if(flag_expand == 'N'){
if(cnt >= obj.length) cnt = 1;
obj.options[cnt].selected = true;
obj.options[cnt].style.color= cnt% 2 == 0 ? color_[0] : color_[1];
cnt++;
timer=setTimeout('start_roll()', 1000);
}
}

function stop_roll(){
obj.options[0].selected = true;
clearTimeout(timer);
}

start_roll();
//-->
</script>

1. <FORM name='ff2' METHOD=POST ACTION="">
2. <SELECT NAME="ss1" size=1 onChange='init_list("ff2","ss1","ss2","ss3",1)'>
3.     <option value='0'>대분류</option>
4. </SELECT>
6. <SELECT NAME="ss2" size=1 onChange='init_list("ff2","ss1","ss2","ss3",2)'>
7.     <option >중분류</option>
8. </SELECT>
10. <SELECT NAME="ss3" size=1>
11.     <option >소분류</option>
12. </SELECT>
14. </FORM>
18. <SCRIPT LANGUAGE="JavaScript">
19. <!--
21. /////////////////////////////// 대분류 배열
22. //    Ccode = new Array();
23. //    Cname = new Array();
24.     Ccode = ["0","11","12"]
25.     Cname = ["대분류","비지니스/경제","컴퓨터/인터넷"]
27. ////////////////////////////// 중분류 배열    
29.     Ccode11 = ["0","1111","1112","1113"]
30.     Cname11 = ["중분류","경제1","경제2","경제3"]
31.     Cflag11 = ["0","0","1","1"]
33.     Ccode12 = ["0","1211","1212","1213"]
34.     Cname12 = ["중분류","운영체제","컴퓨터활용","소프트웨어"]
36. ///////////////////////////// 소분류 배열
37.     Ccode1111 = ["0","111111","111112","111113"]
38.     Cname1111 = ["소분류","경제소1","경제소2","경제소3"]
40.     Ccode1112 = ["0","111111","111112","111113"]
41.     Cname1112 = ["소분류","경제소221","경제소222","경제소223"]
43.     Ccode1211 = ["0","111111","111112","111113"]
44.     Cname1211 = ["소분류","윈도우소1","리눅스소2","유닉스소3"]
46.     Ccode1212 = ["0","111111","111112","111113"]
47.     Cname1212 = ["소분류","윈도우소2221","리눅스소2222","유닉스2223"]
50. //////////////////////////////////////////////
51. // ff - 폼이름
52. // ss1 - 대분류 셀렉트박스 이름
53. // ss2 - 중분류 셀렉트박스 이름
54. // ss3 - 소분류 셀렉트박스 이름
55. // gubun - 대분류에서 온 값인지 소분류에서 온 값인지 여부
56. ////////////////////////////////////////////////
58. function init_list(Pform,Pss1,Pss2,Pss3,gubun) {
59. FS1 = eval(Pform + "." + Pss1)
60. FS2 = eval(Pform + "." + Pss2)
61. FS3 = eval(Pform + "." + Pss3)
64. switch(gubun) {
65.     case 1 :
66. // 대분류값이 변하였을 경우
67.      if(FS1.options[FS1.selectedIndex].value != 0 ) {
69.         MCcode = eval( "Ccode" + FS1.options[FS1.selectedIndex].value )
70.         MCname = eval( "Cname" + FS1.options[FS1.selectedIndex].value )
72.         FS2.options.length = Ccode.length
73.         for(i=0 ; i < Ccode.length ; i++) {
74.          FS2.options[i].value = MCcode[i]
75.          FS2.options[i].text = MCname[i]
76.         }
77.      } else {
78.          FS2.options.length = 1
79.          FS2.options[0].value = "0"
80.          FS2.options[0].text = "중분류"
81.      }
82.      break ;
83.     case 2 :
84. // 중분류값이 변하였을 경우
85.      if(FS2.options[FS2.selectedIndex].value != 0 ) {
86.         SCcode = eval( "Ccode" + FS2.options[FS2.selectedIndex].value )
87.         SCname = eval( "Cname" + FS2.options[FS2.selectedIndex].value )
89.         FS3.options.length = Ccode.length
90.         for(i=0 ; i < Ccode.length ; i++) {
91.          FS3.options[i].value = SCcode[i]
92.          FS3.options[i].text = SCname[i]
93.         }
94.      } else {
95.          FS3.options.length = 1
96.          FS3.options[0].value = "0"
97.          FS3.options[0].text = "소분류"        
98.      }
99.      break ;
100.     default :
101. // 초기화 기본값
102.          FS1.options.length = Ccode.length
103.          for(i=0 ; i < Ccode.length ; i++) {
104.             FS1.options[i].value = Ccode[i]
105.             FS1.options[i].text = Cname[i]
106.          }
108.      break ;
109.     }
110. }
112. init_list("ff2","ss1","ss2","ss3",0) ;
113. //-->
114. </SCRIPT>

1. <style type=text/css>
2. select {font-size:9pt;font-family:굴림;}
3. </style>
4. </head>
6. <body bgcolor=white text=black link=blue vlink=purple alink=red>
8. <table align=center>
10. <form name=form method=POST action="">
12. <tr>
13. <td>
14. <select name="high_cg" size="1" onchange="changeCG(document.form.high_cg)"></select>
15. <select name="mid_cg" size="1">
16. <option value="중분류">중분류</option>
17. </select>
19. </td>
21. </form>
22. <script language="JavaScript">
23. <!-- JavaScript
24. midCG = new Array(20);
26. midCG[0] = "";
27. midCG[1] = new Array("TV","라디오","인터넷방송","신문","웹진","잡지","각종 통계","쿨사이트");
28. midCG[2] = new Array("영화","연극/음악","만화-애니메이션","문학","연예","유머-재미","게임");
29. midCG[3] = new Array("공연예술","공예","디자인","박물관,화랑","예술가"," 전통예술");
30. midCG[4] = new Array("정부기관","정치","법","군대","대사관","시민단체");
31. midCG[5] = new Array("사람들","사회이슈","문화","기관-단체","환경-자연","식음료","동호회");
32. midCG[6] = new Array("회사","광고","투자-재테크","금융","증권","보험","부동산","취업-채용","창업");
33. midCG[7] = new Array("쇼핑몰"," 경매","공동구매 ","가격비교","소비자평가");
34. midCG[8] = new Array("무료정보","무료다운","이벤트-경품 소개");
35. midCG[9] = new Array("하드웨어","소프트웨어","프로그래밍 언어","멀티미디어","게임","보안과 암호","인터넷종합","채팅","통신-네트워크","OS");
36. midCG[10] = new Array("패션","미용","가족","결혼","육아","다이어트","인테리어");
37. midCG[11] = new Array("여행-관광","취미","레저","자동차","게임");
38. midCG[12] = new Array("실내스포츠","실외스포츠","스포츠스타","스포츠관련 미디어","스포츠종합");
39. midCG[13] = new Array("인문과학","사회과학","자연과학","공학");
40. midCG[14] = new Array("건강일반","병원","의학정보","한의학","의료상담","다이어트");
41. midCG[15] = new Array("교육일반","학교","선생님","기관-단체","온라인교육","시험-자격증");
42. midCG[16] = new Array("유학","도서관","전문가서비스");
43. midCG[17] = new Array("학과","동아리","학생회","동문-동창회","연구소","소모임");
44. midCG[17] = new Array("기독교","천주교","불교","민족종교","기타");
45. midCG[18] = new Array("가수","탤런트","개그맨","영화배우","모델","스포츠스타","순수예술인");
46. midCG[19] = new Array("기업","사람","기타");
48. listHighCG = new Array("대분류 선택","뉴스-미디어","엔터테이먼트","예술","정치 및 법","사회문화","경제","쇼핑","공짜&무료","컴퓨터,인터넷","가정-여성","레크리에이션","스포츠","학문-과학","건강-의학","교육","학교","종교","팬클럽","안티사이트");
50. highSelect = document.form.high_cg;
51. midSelect = document.form.mid_cg;
53. function strPos(s, s1)
54. {
55. if(s1 == null) return;
56. for(i=0; i<s.length; i++)
57. {
58. if(s[i] == s1) return i;
59. }
61. return -1;
62. }
64. function setMidCG(high_cg,mid_cg)
65. {
66. var num = midSelect.length;
67. for(i=0; i<num; i++)
68. {
69. midSelect.options[1]= null;
70. }
72. midSelect.options[0] = new Option("중분류 선택","");
73. for(var i=0; i<midCG[high_cg].length; i++)
74. {
75. var myitem = new Option(midCG[high_cg][i])
76. midSelect.options[i+1] = myitem;
77. }
79. if(mid_cg > 0)
80. {
81. midSelect.options.selectedIndex = mid_cg;
82. }
83. }
85. function changeCG(menu)
86. {
87. selectNum = menu.selectedIndex;
89. setMidCG(selectNum,0);
90. }
92. function init()
93. {
94. for(var i=0; i<listHighCG.length; i++)
95. {
96. var item = new Option(listHighCG[i])
97. highSelect.options[i] = item;
98. }
100. pos = strPos(listHighCG,"컴퓨터,인터넷");
101. if(pos < 1) pos = 0;
103. setMidCG(pos,strPos(midCG[pos],"인터넷종합")+1);
104. highSelect.options.selectedIndex = pos;
105. }
107. window.onload = init;
108. // - JavaScript - -->
109. </script>
111. </tr>
112. </table>