基本信息
源码名称：html省市级联(select联动)示例源码
源码大小：1.69KB
文件格式：.html
开发语言：CSS
更新时间：2018-06-03
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<html>

	<head>
		<script>
		//底层数据源
			var pro=['黑龙江','吉林','辽宁'];
			//次级数据源要使用二维数组
			var city=[
			['哈尔滨','佳木斯','齐齐哈尔','大庆','鹤岗'],
			['长春','四平','松原','吉林'],
			['铁岭','大连','沈阳']
			];

			function init(){
				loadpro();
				loadCity();
			}
			//加载省级的选择函数
			/*思路：在省级的select中加入option选项
			 *实现：找到provice选择框->创建option并加入select中
			 *		->加入数量内容（.innerHTML）由数据源决定(循环)
			 *		->先写入内容再添加到父级标签select中
			 */
			function loadpro(){
			var provice=document.getElementById('provice');
			for(var i=0;i<pro.length;i  ){
				var option=document.createElement('option');
				option.innerHTML=pro[i];
				provice.appendChild(option);
			}
			}
			//加载城市的选择函数
			/*思路：在所选省级下的select中加入option城市
			 *实现：确认当前选择省级（确认索引）：1.找到省级的select中的值（value）2.将当前值与第i个省级对比（确认索引）
			 *		->加入城市数据源中的第i组数据option：1.找到城市select 2.循环第i组数据加入（数量：二维长度）
			 *注意：没选择一次要清空城市选择框中的内容
			 */
			function loadCity(){
				//找到select provice
				var provice=document.getElementById('provice');
				var c=document.getElementById('city');
					c.innerHTML='';
				for(var i=0;i<pro.length;i  ){
					if(pro[i]==provice.value){
					var cs=city[i];
					for(var j=0;j<cs.length;j  ){
						var option = document.createElement('option');
						option.innerHTML=cs[j];
						c.appendChild(option);
						}
					}
				}
			}
//选择框
		</script>
	</head>
	<body onload="init()">
		<select id="provice" onchange="loadCity()">
		</select>==<select id = "city"></select>
	</body>

</html>