【javascript】动态的选择和二级联动菜单

最新推荐文章于 2024-07-12 16:27:40 发布

零度弥合

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量226

点赞数

分类专栏： J2EE基础文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wanda39kela/article/details/84523485

版权

J2EE基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

两个栗子来自，《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;
	}
}

零度弥合

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript】动态的选择和二级联动菜单

两个栗子来自，《javascript开发技术大全》，觉得很有用放在这里。第一个是动态选择 &lt;html&gt;&lt;head&gt;&lt;title&gt;15-21动态的选择&lt;/title&gt;&lt;meta http-equiv=content-type content=text/html;charset=gb2312&gt;&lt;scr...
复制链接

扫一扫