js 三级联动2(添加了不同省时加载第一个市的同时加载对应的区)

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103661491

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		select{
			width:200px;
			height:35px;
		}
	</style>
	
	<script src="jquery-3.4.1.js"></script>
</head>
<body>

	<span>省:</span>
	<select name="" id="" class="sheng">
		<option value="">请选择</option>
	</select>
	<span>市:</span>
	<select name="" id="" class="shi">
	</select>
	<span>区:</span>
	<select name="" id="" class="qu">
	</select>

	<script>

		var shengSelect=document.querySelector(".sheng");
		var shiSelect=document.querySelector(".shi");
		var quSelect=document.querySelector(".qu");
		var shengList=['河北','黑龙江','哈尔滨'];
		var shiList=[['保定','石家庄'],['大庆','齐齐哈尔'],['尔滨','商丘']];
		var quList=[[['保定1','保定2'],["石1","石2"]],[["庆1","庆2","庆3"],["齐1","齐2"]],[["哈1","哈3"],["商丘1","商丘2"]]];

		var shengIndex=0;
		var shiIndex=0;
		//页面加载,省下拉框填充内容
		for(var i=0;i<shengList.length;i++)
		{
			var shengOption=new Option(shengList[i]);
			shengSelect.options.add(shengOption);

		}
		//选择省，加载市
		shengSelect.onchange=function(event)
		{	
				var event=event||window.event;
				
				shengIndex=event.target.selectedIndex-1;
				if(shengIndex==-1)
				{
					console.log("请选择省");
					shiSelect.options.length=0;
					quSelect.options.length=0;
					
				}else{
					shiSelect.options.length=0;
					for(var i=0;i<shiList[shengIndex].length;i++)
					{
						var shiOption=new Option(shiList[shengIndex][i]);
						shiSelect.options.add(shiOption);
					}
					//加载市的同时，加载第一个市的所有区
					for(var k=0;k<quList[shengIndex][0].length;k++)
					{
						quSelect.options.length=0;
						var option=new Option(quList[shengIndex
							][0][k]);
						quSelect.options.add(option);
					}
				}


		}
		//选择市,加载区
		shiSelect.onchange=function(event)
		{

			shiIndex=event.target.selectedIndex;
			quSelect.options.length=0;
			for(var i=0;i<quList[shengIndex][shiIndex].length;i++)
			{
				var quOption =new Option(quList[shengIndex][shiIndex][i]);
				quSelect.options.add(quOption);
			}
		}

	</script>
	
</body>

</html>