멀티 셀렉트 (다양한 응용은 사용자 몫) --사실 제가 필요해서 ^^; 정보
멀티 셀렉트 (다양한 응용은 사용자 몫) --사실 제가 필요해서 ^^;
본문
<HTML>
<HEAD>
<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->
<script LANGUAGE="javascript">
<!--
var MainList=new Array(5);
var SubList=new Array(11);
var SubList1=new Array(22);
//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");
//Fill the values of the third list
// Similar to the second list
SubList1[0]=new ListSubItem(0,0,"Delicious");
SubList1[1]=new ListSubItem(0,1,"Jonathan");
SubList1[2]=new ListSubItem(1,2,"Yellow Pear");
SubList1[3]=new ListSubItem(1,3,"Green Pear");
SubList1[4]=new ListSubItem(2,4,"Tomato");
SubList1[5]=new ListSubItem(2,5,"Cherry Tomato");
SubList1[6]=new ListSubItem(3,6,"Yellow");
SubList1[7]=new ListSubItem(3,7,"Green Cucumber ");
SubList1[8]=new ListSubItem(4,8,"Male 1");
SubList1[9]=new ListSubItem(4,9,"Male 2");
SubList1[10]=new ListSubItem(5,10,"Brunette");
SubList1[11]=new ListSubItem(5,11,"Blond");
SubList1[12]=new ListSubItem(6,12,"Georgina She");
SubList1[13]=new ListSubItem(6,13,"Georgina who");
SubList1[14]=new ListSubItem(7,14,"Susanne Garcia");
SubList1[15]=new ListSubItem(7,15,"Susanne Sommers");
SubList1[16]=new ListSubItem(8,16,"Peter Smit");
SubList1[17]=new ListSubItem(8,17,"Peter Wright");
SubList1[18]=new ListSubItem(9,18,"McCartney");
SubList1[19]=new ListSubItem(9,19,"Harris");
SubList1[20]=new ListSubItem(10,20,"Schiphol Airport");
SubList1[21]=new ListSubItem(10,20,"Channels");
SubList1[22]=new ListSubItem(11,21,"Tour Eiffel");
SubList1[23]=new ListSubItem(11,21,"Louvre Museum");
}
function reFillList(){
var selValue;
var nOption;
selValue=document.form1.mainlist[document.form1.mainlist.selectedIndex].value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
document.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=document.form1.sublist.length;
document.form1.sublist.options[nOption]=new Option(SubList[i].description,SubList[i].nvalue);
}
}
document.form1.sublist.options[0].selected=true;
}
function reFillList1(){
var selValue;
var nOption;
selValue=document.form1.sublist[document.form1.sublist.selectedIndex].value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
document.form1.sublist1.length=0
for (var i=0; i < SubList1.length;i++){
//fill the box with the values corresponding to
//the category in the first box
if (SubList1[i].category==selValue) {
nOption=document.form1.sublist1.length;
document.form1.sublist1.options[nOption]=new Option(SubList1[i].description,SubList1[i].nvalue);
}
}
document.form1.sublist1.options[0].selected=true;
}
function checkvalues(){
//show the selected values
var val1;
var val2;
var val3;
var cString;
val1=document.form1.mainlist[document.form1.mainlist.selectedIndex].value;
val2=document.form1.sublist[document.form1.sublist.selectedIndex].value;
val3=document.form1.sublist1[document.form1.sublist1.selectedIndex].value;
cString="Main List=value:" + val1 + "-Description:"+MainList[val1].description
cString+="\n"
cString+="Sub List=value:" + val2+ "-Description:"+SubList[val2].description
cString+="\n"
cString+="Sub List1=value:" + val3+ "-Description:"+SubList1[val3].description
alert(cString);
}
//-->
</script>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<CENTER>
<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+="첫번째 항목을 선택하세요: ";
page+="<SELECT NAME='mainlist' onChange='reFillList();reFillList1()'>";
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>
<p>두번째 항목을 선택하세요: <select NAME="sublist" size="2" onChange='reFillList1()'>
<option></option>
</select>
<script LANGUAGE="javascript">
<!--
// since we have selected the first value in the main list, we have to fill this list
reFillList();
//-->
</script> </p>
<BR>
두번째항목의 서브항목을 선택하세요:<select NAME="sublist1" size="2">
<script language="Javascript">
<!--
reFillList1();
//-->
</script>
</select>
<p><input type="button" value=" 확인 " id="button1" name="button1"
onClick="checkvalues()"> </p>
</form>
</BODY>
</HTML>
<HEAD>
<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->
<script LANGUAGE="javascript">
<!--
var MainList=new Array(5);
var SubList=new Array(11);
var SubList1=new Array(22);
//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");
//Fill the values of the third list
// Similar to the second list
SubList1[0]=new ListSubItem(0,0,"Delicious");
SubList1[1]=new ListSubItem(0,1,"Jonathan");
SubList1[2]=new ListSubItem(1,2,"Yellow Pear");
SubList1[3]=new ListSubItem(1,3,"Green Pear");
SubList1[4]=new ListSubItem(2,4,"Tomato");
SubList1[5]=new ListSubItem(2,5,"Cherry Tomato");
SubList1[6]=new ListSubItem(3,6,"Yellow");
SubList1[7]=new ListSubItem(3,7,"Green Cucumber ");
SubList1[8]=new ListSubItem(4,8,"Male 1");
SubList1[9]=new ListSubItem(4,9,"Male 2");
SubList1[10]=new ListSubItem(5,10,"Brunette");
SubList1[11]=new ListSubItem(5,11,"Blond");
SubList1[12]=new ListSubItem(6,12,"Georgina She");
SubList1[13]=new ListSubItem(6,13,"Georgina who");
SubList1[14]=new ListSubItem(7,14,"Susanne Garcia");
SubList1[15]=new ListSubItem(7,15,"Susanne Sommers");
SubList1[16]=new ListSubItem(8,16,"Peter Smit");
SubList1[17]=new ListSubItem(8,17,"Peter Wright");
SubList1[18]=new ListSubItem(9,18,"McCartney");
SubList1[19]=new ListSubItem(9,19,"Harris");
SubList1[20]=new ListSubItem(10,20,"Schiphol Airport");
SubList1[21]=new ListSubItem(10,20,"Channels");
SubList1[22]=new ListSubItem(11,21,"Tour Eiffel");
SubList1[23]=new ListSubItem(11,21,"Louvre Museum");
}
function reFillList(){
var selValue;
var nOption;
selValue=document.form1.mainlist[document.form1.mainlist.selectedIndex].value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
document.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=document.form1.sublist.length;
document.form1.sublist.options[nOption]=new Option(SubList[i].description,SubList[i].nvalue);
}
}
document.form1.sublist.options[0].selected=true;
}
function reFillList1(){
var selValue;
var nOption;
selValue=document.form1.sublist[document.form1.sublist.selectedIndex].value;
//alert("Selected value=" +selValue);
// clear the actual list by setting its length to 0
document.form1.sublist1.length=0
for (var i=0; i < SubList1.length;i++){
//fill the box with the values corresponding to
//the category in the first box
if (SubList1[i].category==selValue) {
nOption=document.form1.sublist1.length;
document.form1.sublist1.options[nOption]=new Option(SubList1[i].description,SubList1[i].nvalue);
}
}
document.form1.sublist1.options[0].selected=true;
}
function checkvalues(){
//show the selected values
var val1;
var val2;
var val3;
var cString;
val1=document.form1.mainlist[document.form1.mainlist.selectedIndex].value;
val2=document.form1.sublist[document.form1.sublist.selectedIndex].value;
val3=document.form1.sublist1[document.form1.sublist1.selectedIndex].value;
cString="Main List=value:" + val1 + "-Description:"+MainList[val1].description
cString+="\n"
cString+="Sub List=value:" + val2+ "-Description:"+SubList[val2].description
cString+="\n"
cString+="Sub List1=value:" + val3+ "-Description:"+SubList1[val3].description
alert(cString);
}
//-->
</script>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<CENTER>
<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+="첫번째 항목을 선택하세요: ";
page+="<SELECT NAME='mainlist' onChange='reFillList();reFillList1()'>";
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>
<p>두번째 항목을 선택하세요: <select NAME="sublist" size="2" onChange='reFillList1()'>
<option></option>
</select>
<script LANGUAGE="javascript">
<!--
// since we have selected the first value in the main list, we have to fill this list
reFillList();
//-->
</script> </p>
<BR>
두번째항목의 서브항목을 선택하세요:<select NAME="sublist1" size="2">
<script language="Javascript">
<!--
reFillList1();
//-->
</script>
</select>
<p><input type="button" value=" 확인 " id="button1" name="button1"
onClick="checkvalues()"> </p>
</form>
</BODY>
</HTML>
추천
1
1
댓글 0개