js实现的下拉链表的联动效果

最新推荐文章于 2021-12-01 22:40:20 发布

ZZqieqie

最新推荐文章于 2021-12-01 22:40:20 发布

阅读量1.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xw370457549/article/details/8109813

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
	function changeSel() {
		if(document.ld.xllb1.selectedIndex == 0) {
			document.ld.xllb2.length=1;
			document.ld.xllb1.selectedIndex=0;
			document.ld.xllb2.selectedIndex=0;
			document.ld.xllb2.options[0].text="请选择学校";		//设置显示的文字
			document.ld.xllb2.options[0].value="请选择学校";
		}
		
		if(document.ld.xllb1.selectedIndex == 1) {
			document.ld.xllb2.length=4;
			document.ld.xllb1.selectedIndex=1;
			document.ld.xllb2.selectedIndex=0;
			document.ld.xllb2.options[0].text="重邮";	
			document.ld.xllb2.options[0].value="重邮";
			document.ld.xllb2.options[1].text="重交";
			document.ld.xllb2.options[1].value="重交";
			document.ld.xllb2.options[2].text="重大";
			document.ld.xllb2.options[2].value="重大";
			document.ld.xllb2.options[3].text="重医";
			document.ld.xllb2.options[3].value="重医";
		}
		
		if(document.ld.xllb1.selectedIndex == 2) {
			document.ld.xllb2.length=2;
			document.ld.xllb1.selectedIndex=2;
			document.ld.xllb2.selectedIndex=0;
			document.ld.xllb2.options[0].text="电子科技大学";
			document.ld.xllb2.options[0].value="电子科技大学";
			document.ld.xllb2.options[1].text="成都理工";
			document.ld.xllb2.options[1].value="成都理工";
		}
		
		if(document.ld.xllb1.selectedIndex == 3) {
			document.ld.xllb2.length=2;
			document.ld.xllb1.selectedIndex=3;
			document.ld.xllb2.selectedIndex=0;
			document.ld.xllb2.options[0].text="北京大学";
			document.ld.xllb2.options[0].value="北京大学";
			document.ld.xllb2.options[1].text="清华大学";
			document.ld.xllb2.options[1].value="清华大学";
		}
	}
</script>
</head>

<body>
<form action="" method="post" name="ld">
	<select name="xllb1" οnchange="changeSel()">
    	<option value="请选择城市" selected="selected">请选择城市</option>
    	<option value="重庆">重庆</option>
        <option value="成都">成都</option>
        <option value="北京">北京</option>
    </select> 
    
    <select name="xllb2" size=1>
    	<option value="请选择学校">请选择学校</option>
    </select> 
</form>
</body>
</html>

显示效果：

ZZqieqie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js实现的下拉链表的联动效果

无标题文档 function changeSel() { if(document.ld.xllb1.selectedIndex == 0) { document.ld.xllb2.length=1; document.ld.xllb1.selectedIndex=0; document.ld.xllb2.selectedIndex=0; documen
复制链接

扫一扫