하나의 항목을 선택하면 그 항목과 관련된 또다른 항목이 나타나면서 선택할 수 있는 콤보박스입니다
<!--아래의 스크립트를 head 부분에 넣으세요-->
<SCRIPT LANGUAGE=javascript>
<!--
var MainList=new Array(5);;
var SubList=new Array(11);;
//define objects for the main list
function ListItem(nvalue,description){
//function for defining the elements of the main list
this.nvalue=nvalue;
this.description=description;
}
//define objects for the dependent list
function ListSubItem(category,nvalue,description){
//function for defining the elements of the sublists
this.category=category;
this.nvalue=nvalue;
this.description=description;
}
function PrepareData(){
// the function will fill in 2 arrays. The function can be filled in ASP
// so the values from the array will come from the database
MainList[0]=new ListItem(0,"Fruits");
MainList[1]=new ListItem(1,"Vegetables");
MainList[2]=new ListItem(2,"Sex");
MainList[3]=new ListItem(3,"Girls names");
MainList[4]=new ListItem(4,"Boys names");
MainList[5]=new ListItem(5,"Cities");
//Fill the values of the second list
//The first parameter is the category, the second is the value to be returned
//from this selection and the third one is the text that appears in the
//combo box
SubList[0]=new ListSubItem(0,0,"Apples");
SubList[1]=new ListSubItem(0,1,"Pear");
SubList[2]=new ListSubItem(1,2,"Tomato");
SubList[3]=new ListSubItem(1,3,"Cucumber");
SubList[4]=new ListSubItem(2,4,"Male");
SubList[5]=new ListSubItem(2,5,"Female");
SubList[6]=new ListSubItem(3,6,"Georgina");
SubList[7]=new ListSubItem(3,7,"Susanne");
SubList[8]=new ListSubItem(4,8,"Peter");
SubList[9]=new ListSubItem(4,9,"Paul");
SubList[10]=new ListSubItem(5,10,"Amsterdam");
SubList[11]=new ListSubItem(5,11,"Paris");
}
function reFillList(){
var selValue;
var nOption;
selValue=form1.mainlist.value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
form1.sublist.length=0
for (var i=0; i < SubList.length;i++){
//fill the box with the values corresponding to
//the category in the first box
if (SubList[i].category==selValue) {
nOption=form1.sublist.length;
form1.sublist.options[nOption]=new Option(SubList[i].description,SubList[i].nvalue);
}
}
form1.sublist.options[0].selected=true;
}
function checkvalues(){
//show the selected values
var val1;
var val2;
var cString;
val1=form1.mainlist.value;
val2=form1.sublist.value;
cString="Main List=value:" + val1 + "-Description:"+MainList[val1].description
cString+="n"
cString+="Sub List=value:" + val2+ "-Description:"+SubList[val2].description
alert(cString);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- 아래의 스크립트를 body 내에 넣으세요 -->
<FORM name="form1">
<SCRIPT LANGUAGE=javascript>
<!--
var page=""
var i;
// call the function that fills in the arrays so we'll use them to fill the select
PrepareData();
page+="Select the main list: ";
page+="<SELECT NAME='mainlist' onChange='reFillList()'>";
for (i=0;i<MainList.length;i++) {
page+="<OPTION VALUE="+MainList[i].nvalue;
if (i==0) {
page+=" SELECTED ";
}
page+=">"+MainList[i].description;
}
page+="</SELECT>";
document.write(page);
//-->
</SCRIPT>
Select SubList:
<SELECT NAME='sublist' size=2>
<SCRIPT LANGUAGE=javascript>
<!--
// since we have selected the first value in the main list, we have to fill this list
reFillList();
//-->
</SCRIPT>
</SELECT>
<P>
<INPUT type="button" value="Press me" id=button1 name=button1 onClick="checkvalues()">
</FORM>
- 출처 : http://blog.paran.com/atstall4/4344721 -
<!--아래의 스크립트를 head 부분에 넣으세요-->
<SCRIPT LANGUAGE=javascript>
<!--
var MainList=new Array(5);;
var SubList=new Array(11);;
//define objects for the main list
function ListItem(nvalue,description){
//function for defining the elements of the main list
this.nvalue=nvalue;
this.description=description;
}
//define objects for the dependent list
function ListSubItem(category,nvalue,description){
//function for defining the elements of the sublists
this.category=category;
this.nvalue=nvalue;
this.description=description;
}
function PrepareData(){
// the function will fill in 2 arrays. The function can be filled in ASP
// so the values from the array will come from the database
MainList[0]=new ListItem(0,"Fruits");
MainList[1]=new ListItem(1,"Vegetables");
MainList[2]=new ListItem(2,"Sex");
MainList[3]=new ListItem(3,"Girls names");
MainList[4]=new ListItem(4,"Boys names");
MainList[5]=new ListItem(5,"Cities");
//Fill the values of the second list
//The first parameter is the category, the second is the value to be returned
//from this selection and the third one is the text that appears in the
//combo box
SubList[0]=new ListSubItem(0,0,"Apples");
SubList[1]=new ListSubItem(0,1,"Pear");
SubList[2]=new ListSubItem(1,2,"Tomato");
SubList[3]=new ListSubItem(1,3,"Cucumber");
SubList[4]=new ListSubItem(2,4,"Male");
SubList[5]=new ListSubItem(2,5,"Female");
SubList[6]=new ListSubItem(3,6,"Georgina");
SubList[7]=new ListSubItem(3,7,"Susanne");
SubList[8]=new ListSubItem(4,8,"Peter");
SubList[9]=new ListSubItem(4,9,"Paul");
SubList[10]=new ListSubItem(5,10,"Amsterdam");
SubList[11]=new ListSubItem(5,11,"Paris");
}
function reFillList(){
var selValue;
var nOption;
selValue=form1.mainlist.value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
form1.sublist.length=0
for (var i=0; i < SubList.length;i++){
//fill the box with the values corresponding to
//the category in the first box
if (SubList[i].category==selValue) {
nOption=form1.sublist.length;
form1.sublist.options[nOption]=new Option(SubList[i].description,SubList[i].nvalue);
}
}
form1.sublist.options[0].selected=true;
}
function checkvalues(){
//show the selected values
var val1;
var val2;
var cString;
val1=form1.mainlist.value;
val2=form1.sublist.value;
cString="Main List=value:" + val1 + "-Description:"+MainList[val1].description
cString+="n"
cString+="Sub List=value:" + val2+ "-Description:"+SubList[val2].description
alert(cString);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- 아래의 스크립트를 body 내에 넣으세요 -->
<FORM name="form1">
<SCRIPT LANGUAGE=javascript>
<!--
var page=""
var i;
// call the function that fills in the arrays so we'll use them to fill the select
PrepareData();
page+="Select the main list: ";
page+="<SELECT NAME='mainlist' onChange='reFillList()'>";
for (i=0;i<MainList.length;i++) {
page+="<OPTION VALUE="+MainList[i].nvalue;
if (i==0) {
page+=" SELECTED ";
}
page+=">"+MainList[i].description;
}
page+="</SELECT>";
document.write(page);
//-->
</SCRIPT>
Select SubList:
<SELECT NAME='sublist' size=2>
<SCRIPT LANGUAGE=javascript>
<!--
// since we have selected the first value in the main list, we have to fill this list
reFillList();
//-->
</SCRIPT>
</SELECT>
<P>
<INPUT type="button" value="Press me" id=button1 name=button1 onClick="checkvalues()">
</FORM>
- 출처 : http://blog.paran.com/atstall4/4344721 -
'HTML&JSP&Javascript' 카테고리의 다른 글
| [펌] 동적으로 input box 추가/삭제 (0) | 2011.12.20 |
|---|---|
| form input을 이용한 배열 넘기기(퍼옴) (0) | 2011.12.20 |
| Custom Tag(Classic Type) (0) | 2011.05.27 |
| Custom Tag(simple type) (0) | 2011.05.27 |
| div는 무엇일까? 어떻게 사용해야 할까 (0) | 2011.05.22 |
