네이버나 웹에 떠도는 3단콤보 소스 중에 잴 깔끔했던 소스입니다.
그런데 value와 text에 대한 구분이 모호한게 흠이었죠...
보통 3단콤보의 로직은 디비와 연동하여 value, text 값이 존재하게 되는데..
앞으로 계속 개발하는데 써먹을 수 있도록 소스를 수정하였습니다.
<html>
<head>
<title>Dynamic Select Form Sample</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="javascript">
<!--
function Category(value, text) {
this.value = value;
this.text = text;
this.length = 0;
}
function addCategory(category, value, text) {
category[category.length] = new Category(value, text);
category.length++;
}
var category = new Category();
addCategory(category,"macure set", "macure set");
addCategory(category[0], "package", "package");
addCategory(category, "manicare", "manicare");
addCategory(category[1], "implement", "implement");
addCategory(category[1][0], "nail", "nail");
addCategory(category[1][0], "ttweezer", "ttweezer");
addCategory(category[1][0], "scissors", "scissors");
addCategory(category[1][0], "pusher cleaner and knife", "pusher cleaner and knife");
addCategory(category[1][0], "trimmer", "trimmer");
addCategory(category[1][0], "nail clipper", "nail clipper");
addCategory(category[1][0], "nail nipper", "nail nipper");
addCategory(category[1][0], "emery boards", "emery boards");
addCategory(category[1][0], "buffer", "buffer");
addCategory(category[1][0], "ear pick", "ear pick");
addCategory(category[1][0], "multi useful kits", "multi useful kits");
addCategory(category[1], "artificial nail", "artificial nail");
addCategory(category, "pedicure item", "pedicure item");
addCategory(category[2], "pumice stone", "pumice stone");
addCategory(category[2][0], "natural", "natural");
addCategory(category[2][0], "atrtificial", "atrtificial");
addCategory(category[2][0], "ceramic", "ceramic");
addCategory(category[2][0], "sponge", "sponge");
addCategory(category[2], "foot file", "foot file");
addCategory(category[2][1], "emery", "emery");
addCategory(category[2][1], "metalic", "metalic");
addCategory(category[2][1], "laser", "laser");
addCategory(category[2][1], "ceramic", "ceramic");
addCategory(category[2], "toe separator", "toe separator");
addCategory(category[2], "toe nail clipper", "toe nail clipper");
function initForm(form) {
form.subject.length = category.length;
for (i = 0; i < category.length; i++){
form.subject[i].value = category[i].value;
form.subject[i].text = category[i].text;
form.subject.selectedIndex = 0;
form.contents.selectedIndex = 0;
}
change_subject(form);
}
function change_subject(form) {
var i = form.subject.selectedIndex;
form.contents.length = category[i].length;
for (j = 0; j < form.contents.length; j++){
form.contents[j].value = category[i][j].value;
form.contents[j].text = category[i][j].text;
form.contents.selectedIndex = 0;
}
change_contents(form);
}
function change_contents(form) {
var i = form.subject.selectedIndex
var j = form.contents.selectedIndex;
form.components.length = category[i][j].length;
for (k = 0; k < form.components.length; k++){
form.components[k].value = category[i][j][k].value;
form.components[k].text = category[i][j][k].text;
form.components.selectedIndex = 0;
}
}
function change_compo(){
var l = document.form.components.selectedIndex;
alert("value >>"+document.form.components[l].value);
alert("text >>"+document.form.components[l].text);
}
// -->
</SCRIPT>
</head>
<body onLoad="initForm(document.form)">
<h1>3단 동적 셀렉트 박스 예제</h1>
<form name="form" method="get" action="#">
<select name="subject" onchange="change_subject(this.form)"></select>
<select name="contents" onchange="change_contents(this.form)"></select>
<select name="components" onChange="change_compo();"></select>
</form>
</body>
</html>
'HTML & Script' 카테고리의 다른 글
| selectbox 선택시 페이지 이동하기 (1) | 2007.05.02 |
|---|---|
| SelectBox (0) | 2007.05.02 |
| 자바스크립트에서 쿠키지우기 (0) | 2007.05.02 |
| 카운트후 창 닫기 (1) | 2007.05.02 |
| naver 포털 쓸만한 스크립트들 (0) | 2007.05.02 |