两个栗子来自，《javascript开发技术大全》，觉得很有用放在这里。
?第一个是动态选择
?
<html> <head> <title>15-21动态的选择</title> <meta http-equiv=content-type content=text/html;charset=gb2312> <script type=text/javascript src="15-21.js"></script> </head> <body> <form name="myForm" method="post"> <table border="0"> <tr> <td> 可选课程:<br> <select name="selectForm" size="5" ondblclick="addOption()"> <option value="yuwen">语文</option> <option value="shuxue">数学</option> <option value="yingyu">英语</option> <option value="wuli">物理</option> <option value="huaxue">化学</option> <option value="zhengzhi">政治</option> <option value="shegnwu">生物</option> <option value="yinyue">音乐</option> </select> </td> <td> --><br> <--<br> </td> <td> 已选课程(最多可选三门)：<br> <select name="selectTo" size="5" ondblclick="delOption()" </td> </tr> </form> </body> </html>
?
//添加选项
function addOption(){
//获得当前被选择的选项的索引
var index=myForm.selectForm.selectedIndex;
//在下拉列表框中没有选项时，index为-1
if(index>-1){
//判断课程是否小于3门
if(myForm.selectTo.length<3){
//获得当前选项的文字
var optionText=myForm.selectForm.options[index].text;
//获得当前选项的值
var optionValue=myForm.selectForm.options[index].value;
//在下拉列表框中添加选项
myForm.selectTo.options[myForm.selectTo.length]=new Option(optionText,optionValue);
myForm.selectForm.remove(index);
}else{
alert("最多能选取三门课程");
}
}
}
//删除选项
function delOption(){
var index=myForm.selectTo.selectedIndex;
if(index>-1){
//获得当前选项的文字
var optionText=myForm.selectTo.options[index].text;
//获得当前选项的值
var optionValue=myForm.selectTo.options[index].value;
myForm.selectForm.options[myForm.selectForm.length]=new Option(optionText,optionValue);
myForm.selectTo.remove(index);
}
}
?
第二个是二级联动
?
?
<html> <head> <title>15-22二级联动菜单</title> <meta http-equiv=content-type content=text/html;charset=gb2312> <script type=text/javascript src="15-22.js"></script> </head> <body onLoad="categoryOption()"> <form name="myForm" method="post"> <select name="category" onchange="patternOption(this.selectedIndex)"></select> <select name="pattern"></select> </form> </body> </html>
?
//以下数组用于创建显示在下拉列表框中的选项
var pattern=new Array();
pattern[0]=new Array();
pattern[0][0]=["家具","jiaju"];
pattern[0][1]=["玩具","wanju"];
pattern[0][2]=["办公","bangong"];
pattern[0][3]=["服装","fuzhuang"];
pattern[1]=new Array();
pattern[1][0]=["电影","dianying"];
pattern[1][1]=["电视剧","dianshiju"];
pattern[1][2]=["教育","jiaoyu"];
pattern[1][3]=["综艺","zongyi"];
pattern[2]=new Array();
pattern[2][0]=["小说","xiaoshuo"];
pattern[2][1]=["文学","wenxue"];
pattern[2][2]=["动漫","dongman"];
pattern[2][3]=["艺术","yishu"];
//以下数组用于创建第一个下拉列表框中的选项、
var category=new Array();
category[0]=["百货","baihuo",pattern[0]];
category[1]=["影视","yingshi",pattern[1]];
category[2]=["图书","tushu",pattern[2]];
//创建第一个下拉列表中的选项
function categoryOption(){
for(i=0;i<category.length;i++){
var option=new Option (category[i][0],category[i][1]);
myForm.category.options[i]=option;
}
patternOption(0);
}
function patternOption(index){
//删除下拉列表中所有选项
while(myForm.pattern.length>0)
myForm.pattern.remove(0);
//查找用于创建第二个下拉列表的数组
var arr=category[index][2];
for(i=0;i<arr