<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>
'자바스크립트' 카테고리의 다른 글
| [자바스크립트] 주민등록번호 체크 (0) | 2013.02.19 |
|---|---|
| 소스보기 금지 등 기능 막기 (0) | 2013.02.19 |
| 외국인 등록번호 체크 (0) | 2013.02.18 |
| 자바스크립트 타이머설정 (0) | 2013.02.18 |
| 사업자등록번호 체크 (0) | 2013.02.18 |