[코딩] 자바스크립트 다중 셀렉트 코드 -[펌]
아침에 웹에 돌아다니다가 우연히 유익할 만한코드가 공개되어 있어 여기 올립니다.
출처 : http://cafe.naver.com/mjava.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=71
작성자 : 명랑폐인
공개하신분께 감사드립니다.
=======================================이하 소스코드==============================
<script language="JavaScript1.2">
var category = new Array();
function cateInfo(cat_id, cat_name, p_id, depth) {
this.depth = depth;
this.parent = null;
this.cat_id = cat_id;
this.p_id = p_id
this.cat_name = cat_name;
this.child = new Array();
}
rootCate = new cateInfo('0', '', '', 0); //루트 카테고리
rootCate.parent = null; //루트 카테고리의 부모는 없다.
//category = new cateInfo('0', '', '', 0);
category["x_0"] = rootCate;
/** 카테고리를 추가한다.
* notice : 자바스크립트에서는 연관배열에 숫자를 사용할수 없음으로
* "x_" 를 앞에 붙혀 인덱스로 사용
*/
function addCategory(cat_id, cat_name, p_id, depth) {
cateParent = null; //부모카테고리
var idx = "x_" + cat_id;
var p_idx = "x_" + p_id;
cate = new cateInfo(cat_id, cat_name, p_id, depth);
category[idx] = cate; //카테고리 생성
//alert('cat_id : ' + cat_id + ' cat_name : ' + cat_name + ' p_id: ' + p_id + ' depth : ' + depth);
//카테고리간의 연결 링크 생성
if(depth == 1) { //최상위 카테고리는 parent 가 root 이다.
category[idx].parent = rootCate;
rootCate.child[idx] = cate;
} else {
cateParent = category[p_idx];
category[idx].parent = cateParent;
category[idx].parent.child[idx] = cate;
}
}
function changeSubMenu(type) {
var form = document.registForm;
var oSelect;
var idx;
switch(type) {
case 1:
oSelect = form.c_menu2;
idx = "x_" + form.c_menu1.options[form.c_menu1.selectedIndex].value;
//sub = cateLarge[idx].child;
sub = category[idx].child;
removeAll(form.c_menu4);
removeAll(form.c_menu3);
removeAll(form.c_menu2);
break;
case 2:
oSelect = form.c_menu3;
idx = "x_" + form.c_menu2.options[form.c_menu2.selectedIndex].value;
//sub = cateMiddle[idx].child;
sub = category[idx].child;
removeAll(form.c_menu4);
removeAll(form.c_menu3);
break;
case 3:
oSelect = form.c_menu4;
idx = "x_" + form.c_menu3.options[form.c_menu3.selectedIndex].value;
//sub = cateSmall[idx].child;
sub = category[idx].child;
removeAll(form.c_menu4);
break;
default:
break;
return;
}
for(var i in sub) {
oOption = document.createElement("OPTION");
oSelect.options.add(oOption);
oOption.innerText = sub[i].cat_name;
oOption.value = sub[i].cat_id;
}
}
function removeAll(oSelect) {
len = oSelect.options.length;
for(i = len-1; i >= 0 ; i--) {
oSelect.remove(i);
}
}
addCategory('10', '액자', '1', 1);
addCategory('20', '벽지', '1', 1);
addCategory('1010', '디자인액자', '10', 2);
addCategory('1020', '명화액자', '10', 2);
addCategory('1030', '기타', '10', 2);
addCategory('2010', '일반벽지', '20', 2);
addCategory('2020', '뮤럴벽지', '20', 2);
addCategory('101010', '100x200', '1010', 3);
addCategory('101020', '200x300', '1010', 3);
addCategory('101030', '300x300', '1010', 3);
addCategory('102010', '20x20', '1020', 3);
addCategory('102020', '40x40', '1020', 3);
addCategory('103010', '0x0', '1020', 3);
addCategory('201010', '300x300', '2010', 3);
addCategory('201010', '400x400', '2010', 3);
addCategory('202010', '0x0', '2020', 3);
</script>
<body>
<table width=800>
<form name="registForm">
<tr>
<input type="text" name="c_name" value="" size=100>
</tr>
<tr>
<td width="150">
<select name="c_menu1" onChange="changeSubMenu(1)" size=10 style='width:150px'>
</select>
</td>
<td width="150">
<select name="c_menu2" onChange="changeSubMenu(2)" size=10 style='width:150px'>
</select>
</td>
<td width="150">
<select name="c_menu3" onChange="changeSubMenu(3)" size=10 style='width:150px'>
</select>
</td>
<td width="150">
<select name="c_menu4" onChange="changeSubMenu(4)" size=10 style='width:150px'>
</select>
</td>
</tr>
</form>
</table>
<script>
//var c_id = "2602003002";
//getFullCateName(c_id);
var c_id = "101010";
getFullCateName(c_id);
/**
* cat_id 를 통해 루트카테고리로부터 현재 카테고리까지의 전체 카테고리 명을 가져온다.
*/
function getFullCateName(cat_id) {
idx = "x_" + cat_id;
var fullCateName = "";
var cate = null;
if(category[idx] != null) {
cate = category[idx];
}
fullCateName = cate.cat_name;
c = 0;
while(cate.parent != rootCate) { //최상위 카테고리의 parent는 rootCate 이다.
showCateMenu(cate);
cate = cate.parent;
//alert(fullCateName);
fullCateName = cate.cat_name + ">" + fullCateName;
if(c++ > 10) break; //무한 루프 방지
}
showCateMenu(cate); //최상위 카테고리 표시
}
function showCateMenu(cate) {
var oSelect;
var selectedIndex = 0;
var c = 0;
//alert("cat_id : " + cate.cat_id + " cat_name : " + cate.cat_name + " depth : " + cate.depth);
child = cate.parent.child;
if(cate.depth == 4) {
oSelect = document.registForm.c_menu4;
} else if(cate.depth == 3) {
oSelect = document.registForm.c_menu3;
} else if(cate.depth == 2) {
oSelect = document.registForm.c_menu2;
} else if(cate.depth == 1) {
oSelect = document.registForm.c_menu1;
} else {
return;
}
removeAll(oSelect);
for(var idx in child) {
oOption = document.createElement("OPTION");
oSelect.options.add(oOption);
oOption.innerText = child[idx].cat_name;
oOption.value = child[idx].cat_id;
if(child[idx].cat_id == cate.cat_id) {
selectedIndex = c;
}
c++;
}
oSelect.selectedIndex = selectedIndex;
}
/**
* cat_id에 맞게 셀렉트 박스의 아이템을 선택하여 표시한다.
*/
function initCategory(c_id) {
}
</script>
<script>
//initCategory('101010');
</script>
</body>
</html>
=======================================이상 끝==================================
출처 : 마이위트 [배추빌더]
'그누+배추빌더' 카테고리의 다른 글
| [코딩] css 폰트 설정시 브라우저 제약없이 비슷하게 보이게 하는방법 (0) | 2015.09.09 |
|---|---|
| [코딩] php 자동 이동 태그 (= php 납치 태그) (0) | 2015.09.09 |
| [코딩] 상단에 넣을 수 있는 이미지 셔플 (0) | 2015.09.09 |
| [코딩] 마우스 오버를 하면 올라오는 레이어창입니다 (0) | 2015.09.09 |
| [코딩] 마우스 롤오버시 서서히 변하는 이미지에 블라인드 효과주기 (0) | 2015.09.09 |