<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var DPSelectbox = Class.create();
var DPArr = []; // Common
// Common Func
function getKey(key) {
if(DPArr.length > 0) {
for(var i = 0; i < DPArr.length; i++) {
if(DPArr[i].key == key) {
return DPArr[i];
}
}
}
return null;
}
DPSelectbox = {
maxNode: 100,
create: function(div, callback, data) {
this.key = div;
DPArr.push(this);
var mobj = getKey(div);
mobj.div = div;
mobj.turnkey = callback;
mobj.data = data;
mobj.depth = 0;
var code = mobj.data[1];
mobj.makeLayer(div, code);
},
makeLayer : function(div, code) { // public
var mobj = getKey(div);
if (!mobj.isLast(div, code)) {
var layer = document.createElement("DIV");
mobj.depth++;
layer.setAttribute("id", "DP_div_" + mobj.div + "_" + mobj.depth);
layer.appendChild(mobj.makeSelect(div, code));
$(mobj.div).appendChild(layer);
}else {
eval("mobj.turnkey($('DP_select_' + mobj.div + mobj.depth));");
}
},
makeSelect : function(div, code) { // private
var mobj = getKey(this.div);
var obj = document.createElement("select");
var selName = "DP_select_" + mobj.div + "_" + mobj.depth;
obj.setAttribute("id", selName);
var opt = document.createElement("option");
var txt = document.createTextNode("-All-");
opt.setAttribute("value", "");
opt.appendChild(txt);
obj.appendChild(opt);
for(var i = 0; i < mobj.data.length; i+=3) {
if(code == mobj.data[i+1]) {
var opt = document.createElement("option");
var txt = document.createTextNode(mobj.data[i+2]);
opt.setAttribute("value", mobj.data[i]);
opt.appendChild(txt);
obj.appendChild(opt);
}
}
$(mobj.div).appendChild(obj);
$(selName).observe("change", function(event) {
mobj.childNodeExist(div, code, $(selName).id);
mobj.makeLayer(div, this.value);
} );
return obj;
},
isLast : function(div, code) {
var mobj = getKey(div);
var cnt = 0;
for(var i = 0; i < mobj.data.length; i+=3) {
if(code == mobj.data[i+1]) cnt++;
}
return (cnt == 0 ? true : false);
},
childNodeExist : function(div, code, tSel) {
var mobj = getKey(div);
var pos = tSel.lastIndexOf("_") + 1;
var noStr = tSel.substring(pos + div.length);
var no = parseInt(noStr) + 1;
var flag = true;
for(var i = no; i < DPSelectbox.maxNode; i++) {
if($("DP_div_" + div + "" + i) != null) {
$(mobj.div).removeChild($("DP_div_" + div + "_" + i));
flag = false;
}
}
if(!flag) {
mobj.depth = no-1;
}
}
};
function init() {
DPSelectbox.create("sel",
function(obj) {
$("code").value = obj.value;
},
["1", "0", "프로그래밍",
"2", "1", "윈도우",
"3", "1", "리눅스",
"4", "1", "모바일",
"5", "2", "C/C++",
"6", "2", "VB",
"7", "2", "C#",
"8", "3", "GCC/GPP",
"9", "3", "Shell",
"10", "9", "Perl",
"11", "9", "Python",
"12", "9", "Ruby"]
);
/*
DPSelectbox.create("sel1",
function(obj) {
$("code1").value = obj.value;
},
[
"1", "0", "프로그래밍",
"2", "1", "윈도우",
"3", "1", "리눅스",
"4", "1", "모바일",
"5", "2", "C/C++",
"6", "2", "VB",
"7", "2", "C#",
"8", "3", "GCC/GPP",
"9", "3", "Shell",
"10", "9", "Perl",
"11", "9", "Python",
"12", "9", "Ruby"
]
);
*/
}
Event.observe(window, "load", function() { init(); } )
</script>
</head>
<div id="sel"></div>
<div id="sel1"></div>
<input type="text" id="code" name="code" value="">
<input type="text" id="code" name="code1" value="">