级联下拉列表

最新推荐文章于 2021-09-18 10:15:36 发布

溺水行舟

最新推荐文章于 2021-09-18 10:15:36 发布

阅读量9.4k

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/liang5630/article/details/38021757

版权

html+css+js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

／／根据所选的省，自动生成对应的市

<html>
	<head>
		<title>级联列表</title>
		<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
		<style>
			.yemian{
				margin-left:30%;
				text-align:center;
				font-size:50px;
				width:500px;
				height:500px;
				background-color:blue;
			}   
			.s{
				width:120px;
				height:25px;
			}
		</style>
		<script>
			function st(){
			
				var sheng=document.getElementById('sheng');
				//存省的数组，可自行添加
				var shengs=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
				for(var i=0;i<shengs.length;i++){
					sheng.options[i]=shengs[i];
				}
			}
			//存市的数组，根据省的数组添加
			var shis=new Array();
			shis[0]=new Array(new Option("--请选择市--",''));
			shis[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
			shis[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
			function change(obj){
				var shi=document.getElementById('shi');
				shi.options.length=0;
				var index=sheng.selectedIndex;
				for(var x in shis[index]){
					shi.options[x]=shis[index][x]
				}
			}
		</script>
	</head>
	<body  οnlοad="st()">
		<div class='yemian' >
			<div class="top">级联下拉列表</div>
			<select class='s' id='sheng' οnchange='change(this)'>
				<option value=''>--请选择省--</option>
			</select>
			<select class='s' id='shi'>
				<option value=''>--请选择市--</option>
			</select>
		</div>
	</body>


</html>

溺水行舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
级联下拉列表

／／根据所选的省，自动生成对应的市级联列表 .yemian{ margin-left:30%; text-align:center; font-size:50px; width:500px; height:500px; background-color:blue; } .s{ width:12
复制链接

扫一扫

专栏目录