사용하지 마세요. 버그 존재, 완전하지 않음.
사용하는 걸 추천하지 않음.

/*========================================
js_lauer_select.js
SELECTBOX -> 레이어

ex>
js_layer_select([대상 SELECTBOX]);

설명>
SELECT BOX를 레이어 형태로 바꿔준다.

주의>
아직 CSS, Style에 대한 완벽한 실험이 되지 않았음.
바뀐 레이어는 Block개체로 주의에 다른 개체가 같은줄에 올 수 없음.
.style.width 가 없으면 200px로 맞춘다.(꼭 설정하기를 추천)

mins01,mins,공대여자
MSN,NateOn : mins01(at)lycos.co.kr
2007-03-09
"공대여자는 예쁘다."를 나타내야만 쓸 수 있습니다.
//========================================*/
var js_layer_select = function(this_s){
if(this_s.nodeName!='SELECT') return false; //slelct box가 아니면 끝

if(!this_s.style.width)
this_s.style.width = '200px';
if(!this_s.style.border)
this_s.style.border = '2px inset #999999';

var root = document.createElement('span');
//root.style.cssText='float:left;';
root.options = new Array();
root.style.position='static';
//============================================== 붙이기
// this_s.parentNode.insertBefore(root,this_s);
this_s.parentNode.replaceChild(root,this_s);
//==================================================
var selectbox = document.createElement('div');
selectbox.style.padding='0px';
selectbox.style.width = this_s.style.width;
selectbox.style.border = this_s.style.border;
var tbl = document.createElement('table');
tbl.border='0'; tbl.cellPadding="0"; tbl.cellSpacing="0"; tbl.width='100%';
tbl.style.borderCollapse='collapse';
tbl.style.backgroundColor='#ffffff';
tbl.style.width = this_s.style.width;
tbl.style.padding = '0px';
tbl.style.margin = '0px';
var tr = tbl.insertRow(-1);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.width=18;
var valuebox = document.createElement('input');
valuebox.type='hidden';
valuebox.id = this_s.id; valuebox.name = this_s.name;
valuebox.value = this_s.value;
var textbox = document.createElement('input');
textbox.type='text';
textbox.readOnly=true;
textbox.style.cssText = this_s.style.cssText;
textbox.style.borderStyle='none';
textbox.style.width='100%';
var button = document.createElement('input');
button.type='button';
button.style.cssText = this_s.style.cssText;
button.style.borderStyle='outset';
button.style.borderWidth=this_s.style.borderWidth;
button.style.padding='0px';
button.style.margin='0px';
button.style.width='18px';
button.style.height=parseInt(this_s.style.fontSize)+5+'px';
button.style.fontSize='8px';
button.value='▼';

td1.appendChild(textbox);
td1.appendChild(valuebox);
td2.appendChild(button);
selectbox.appendChild(tbl);
root.appendChild(selectbox);
//================================================== option 처리부분
var optiontbox_out = document.createElement('span');
optiontbox_out.style.position='relative';
//optiontbox_out.style.width = this_s.style.width;
var optiontbox = document.createElement('span');
optiontbox.style.position='absolute';
optiontbox.style.left='0px';
optiontbox.style.top='0px';
optiontbox.style.border = this_s.style.border;
optiontbox.style.width = this_s.style.width;
optiontbox.style.borderTopWidth='0px';
optiontbox.style.zIndex='0';
optiontbox.style.borderStyle='solid';
var tbl = document.createElement('table');
tbl.border='0'; tbl.cellPadding="0"; tbl.cellSpacing="0"; tbl.width='100%';
tbl.style.borderCollapse='collapse';
tbl.style.backgroundColor='#ffffff';
tbl.style.width = this_s.style.width;
//tbl.style.border = this_s.style.border;



optiontbox.appendChild(tbl);
root.optiontbox = optiontbox;
optiontbox_out.appendChild(optiontbox);
root.appendChild(optiontbox_out);

var op,tr,td,td_a;
for(var i=0,m=this_s.options.length;i<m;i++){
op = this_s.options[i];
tr = tbl.insertRow(-1);
td = tr.insertCell(-1);
td.style.fontSize=this_s.style.fontSize;
td.style.cursor = 'pointer';
td.onmouseover=function(){
root.on2 = true;
this.style.backgroundColor='#588AD6';this.style.color='white';
}
td.onmouseout=function(){
root.on2 = false;
this.style.backgroundColor='';this.style.color='';
}
td.onclick=function(){
textbox.value=this.innerHTML;
textbox.title=this.title;
valuebox.value=this.title
js_layer_select_optionbox_init(root)
this.parentNode.style.backgroundColor='#96B7E7';
js_layer_select_optionbox_show(root,false);
}
td.innerHTML = op.innerHTML;
td.title = op.value;
if(this_s.selectedIndex==i){
textbox.value=td.innerHTML;
textbox.title=td.title;
valuebox.value=td.title
js_layer_select_optionbox_init(root);
td.parentNode.style.backgroundColor='#96B7E7';
}
root.options.push(td);
}
//======================테이블 높이 체크로 스크롤 생성
if(tbl.clientHeight>50){
//optiontbox.style.height='50px';
//optiontbox.style.overflowY='scroll';
optiontbox.scrollTop = td.scrollHeight*i; //처음부분 높이 맞춤
}
optiontbox.style.overflowX='hidden';
js_layer_select_optionbox_show(root,false);
//========================= 이벤트 붙이기
root.on2 = false;
optiontbox.onmouseover=function(){
root.on2 = true;
}
tbl.onmouseover=function(){
root.on2 = true;
}
button.onclick = function(){
root.on = true;
js_layer_select_optionbox_show(root,true);
}
textbox.onclick=function(){
button.focus();
button.click();
}
button.onblur = function(){
root.on = false;
if(!root.on && !root.on2)
js_layer_select_optionbox_show(root,false);
}
root.onmouseout = function(){
if(!root.on && !root.on2 )
js_layer_select_optionbox_show(root,false);
}
//======================== 원본 삭제
//this_s.parentNode.removeChild(this_s);
}
function js_layer_select_optionbox_init(root){
for(var i=0,m=root.options.length;i<m;i++){
op = root.options[i];
op.parentNode.style.backgroundColor='';
}
}
function js_layer_select_optionbox_show(root,bool){
if(bool== null || bool == undefined){bool = false; }
if(bool){
if(root.optiontbox.style.display=='none'){
root.optiontbox.style.display='';
}else{
root.optiontbox.style.display='none';
}
}else{
root.optiontbox.style.display='none';
}
}