jquery 下拉框联动

最新推荐文章于 2024-05-16 14:33:44 发布

滴...滴滴

最新推荐文章于 2024-05-16 14:33:44 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Tan_tan_666/article/details/84824422

本文介绍了一个使用HTML和JavaScript实现的联动下拉框功能，通过预定义的数据结构，当用户选择省份后，相应的城市和区县会自动更新。此功能基于jQuery库实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<!DOCTYPE html>
<html>
<head>
	<title>联动</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<script type="text/javascript" src="liandong.js"></script>
</head>
<body>
	<div>
		省 : 
		<select id="sheng">
			<option value=""></option>
			<option value="HN">湖南省</option>
			<option value="GD">广东省</option>
			<option value="SC">四川省</option>
		</select>
	</div>
	<div>
		市 :  
		<select id="shi">
			
		</select>
	</div>
	<div>
		区/县 : 
		<select id="xian">
			
		</select>
	</div>
</body>
</html>

JS 代码

$(function (){
	var regions=[
		{name:'HN',nameCN:'湖南省',sub:[
			{name:'yzs',nameCN:'永州市',sub:[
				{name:'qyx',nameCN:'祁阳县'},
				{name:'lstq',nameCN:'冷水滩区'}
			]},
			{name:'css',nameCN:'长沙市',sub:[
				{name:'txq',nameCN:'天心区'},
				{name:'frq',nameCN:'芙蓉区'}
			]}
		]},
		{name:'GD',nameCN:'广东省',sub:[
			{name:'szs',nameCN:'深圳市',sub:[
				{name:'lhq',nameCN:'龙华区'},
				{name:'baq',nameCN:'宝安区'}
			]},
			{name:'gzs',nameCN:'广州市',sub:[
				{name:'thq',nameCN:'天河区'}
			]}
		]},
		{name:'SC',nameCN:'四川省',sub:[
			{name:'cds',nameCN:'成都市',sub:[
				{name:'xxxxx',nameCN:'xxxx县'}
			]}
		]},
	];

	$("#sheng").change(function (){
		var value=$(this).val();
		var shi=[];
		for (var i = 0; i < regions.length; i++) {
			var region=regions[i];
			if(region.name==value){
				shi=region.sub;
				break;
			}
		}
		var codes=[];
		//codes.push('<option value="">选择市区</option>');
		for (var i = 0; i < shi.length; i++) {
			var city=shi[i];
			codes.push('<option value="'+city.name+'">'+city.nameCN+'</option>');
		}
		$("#shi").html(codes.join(""));
		$("#shi").change();
	})

	$("#shi").change(function (){
		var value=$(this).val();
		var shengName=$("#sheng").val();
		var shi=[];
		for (var i = 0; i < regions.length; i++) {
			var region=regions[i];
			if(region.name==shengName){
				shi=region.sub;
				break;
			}
		}

		var codes=[];
		for (var i = 0; i < shi.length; i++) {
			var city=shi[i];
			if(city.name==value){
				codes=city.sub;
				break;
			}
		}
		var code=[];
		//code.push('<option value="">选择区县</option>');
		for (var i = 0; i < codes.length; i++) {
			var xian=codes[i];
			code.push('<option value="'+xian.name+'">'+xian.nameCN+'</option>');
		}
		$("#xian").html(code.join(""));
	})
})

jquery 下拉框 联动

jquery 下拉框联动