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>

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>