两个栗子来自,《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" οndblclick="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" οndblclick="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" οnchange="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.length;i++){ var option=new Option(arr[i][0],arr[i][1]); myForm.pattern.options[i]=option; } }