예제사이트 :  http://sayclub.com
이곳에 가보시면 select 박스가 예쁘게 꾸며진 것을 볼수 있습니다.

위의 첨부파일 소스를 직접 보면 다음과 같습니다.

<script src="http://source.phper.org/selectBox/zSelectBox.js"></script>
<script>
var testSelectBox = new Array();
var testOption = new Array();
testSelectBox["id"] = "test";
testSelectBox["bordercolor"] = "#555555";
testSelectBox["bgcolor"] = "#ffffff";
testSelectBox["fontsize"] = "9";
testSelectBox["focusbgcolor"] = "#eeeeee";
testSelectBox["bullet"] = "<img src='http://source.phper.org/selectBox/select_bul.gif' border=0>";
testOption[0] = "테스트1,1";
testOption[1] = "테스트2,2";
testOption[2] = "테스트3,3";
testOption["select"] = 0;

printZSelectBox(testSelectBox,testOption);
</script>


우선 zSelectBox.js 라는 자바스크립트 파일을 불러옵니다.
소스는 그 파일안을 보면 알 수 있기에 설명은 생략합니다
원체 허접한 소스라서 설명하기도 부끄럽네요.
사용법은 두개의 array 변수에 기본 값과 option값을 넣어 주고 printZSelectBox() 함수를 호출하면 됩니다
위에서는 testSelectBox와 testOption 이라는 array 변수를 사용하였는데,
원하시는 이름으로 바꾸시면 됩니다
testSelectBox에는 몇가지 지정할 수 있는 항목이 있습니다
id 키는 가장 중요한 것인데, 이 부분은 <input type=hidden name=id값> 폼을 몰래 만들어서 form에서 값을 넘길때
사용할 수 있습니다

- 위에 testSelectBox에서 사용되는 설정값을 정리해 보면 아래와 같습니다

id : selectBox의 id를 지정 (id이름으로 hidden 폼을 생성하여 선택되는 값을 입력한다)
width : selectBox의 가로크기를 지정 (절대값이나 %를 붙인 상대값 사용가능;;)
height : 높이 지정 (역시 절대/상대값 사용하면 됨)
bordercolor : 테두리 색깔을 지정
bgcolor : 배경 색깔 지정
fontcolor : 글자 색깔 지정
focusbgcolor : 선택되었을때 배경 색깔
fontsize : 글자의 크기 (숫자만 넣어야 함. 예를 들어 8을 넣으면 8pt가 됨;)
padding : cellpadding의 값을 정함
bullet : 오른쪽 화살표, <img src=...>등의 이미지도 되고, - 같은 텍스트 넣어도 됨
onChange : selectBox에서 많이 쓰는 onChange 이벤트가 일어날때 페이지 이동을 해야 할 경우 [onChange]=true를 입력하면 됨;
     (이 경우에는 option의 value값에 url을 입력하면 됨)

- 그리고 testOption에서는 0 부터 원하는 option값을 추가하면 됩니다
name과 value를 , 로 연결해서 지정하면 됩니다.
예를 들어
이름은 testOption[0] = "이름,값"; 으로 하면 되죠;
(참 허접한 지정입니다만;; 간편한 사용을 위해서 그런 것이니 이해를;;)
만약 option의 초기값을 사용하고 싶은 경우에는;; testOption["select"]=0; 처럼 select 키에 인덱스값을 지정하면 됩니다