jQuery案例之三级联动

最新推荐文章于 2025-06-05 12:50:38 发布

原创最新推荐文章于 2025-06-05 12:50:38 发布 · 置顶 · 183 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
	<script src="../jQuery/jquery-1.8.3.js"></script>
</head>
<body>
	<form action="">
		<select name="" id="p">
			<option>--请选择省--</option>
		</select>
		<select name="" id="c">
			<option>--请选择市--</option>
		</select>
		<select name="" id="a">
			<option>--请选择区/县--</option>
		</select>
	</form>
	<script type="text/javascript">
		var S={};
		S['山东省']=['济南市','青岛市','烟台市','潍坊市'];
		S['江苏省']=['南京市','苏州市','无锡市'];
		var s = {
			'济南市':['历下区','市中区','高新区','天桥区'],
			'青岛市':['黄岛区','崂山区','李沧区','市南区'],
			'潍坊市':['潍城区','寒亭区','坊子区','高新区'],
			'烟台市':['芝罘区','莱山区','牟平区','福山区'],
			'南京市':['玄武区','秦淮区','鼓楼区','栖霞区'],
			'无锡市':['滨湖区','梁溪区','新吴区','锡山区'],
			'苏州市':['姑苏区','虎丘区','吴中区','相城区'],
		};

		//遍历省
		getChild("#p",'',S,'<option value="">--请选择省--</option>');

		//选择省份
		$('#p').change(function(){
			var OBj = $(this).val();
			getChild("#c",OBj,S,'<option value="">--请选择市--</option>');
		});
		
		//选择市
		$('#c').change(function(){
			//获取选择的市
			var city = $(this).val();
			getChild("#a",city,s,'<option value="">--请选择区/县--</option>')
		});

		//element  下拉选单id
		//chooseValue 当前下拉选单的值
		//arrList  数据源
		//initStr  下拉选单初始表示
		function getChild(element,chooseValue,arrList,initStr){
			//定义下拉选单的显示数组（包含初始表示项）
			var showList=[initStr];
			//第一级下拉选单
			if('#p' === element){
				for(i in arrList){
					showList.push('<option value="'+i+'">'+i+'</option>');
				}
			}else{
				//获取当前选项的下一级数据
				var childList = arrList[chooseValue];
				//遍历数据源将其添加到显示数组中
				childList.forEach(function(item){
					showList.push('<option value="'+item+'">'+item+'</option>');
				});
			}
			$(element).html(showList.join(''));
		}
	</script>
</body>
</html>

效果图：