工学日记1106

最新推荐文章于 2024-08-07 17:42:59 发布

余兆俊

最新推荐文章于 2024-08-07 17:42:59 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/Chinaonetwo/article/details/103006316

版权

省市县连动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市县三级联动</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 500px;
			height: 200px;
			margin: 50px auto;
		}
		.box select{
			width: 100px;
		}
	</style>
	<script src="jquery-3.4.1.min.js"></script>
	<script src="template.js"></script>
	<script type="text/html" id="ten">
		<option>{{title}}</option>
		{{if list}}
			{{each list as value}}
				<option value="{{value.id}}">{{value.province}}</option>
			{{/each}}
		{{/if}}
	</script>
</head>
<body>
	<div class="box">
		省份：<select id="se1"><option>--请选择省--</option></select>
		城市：<select id="se2"><option>--请选择市--</option></select>
		县：<select id="se3"><option>--请选择区--</option></select>
	</div>
	<script type="text/javascript">
		$.ajax({
			url:'http://106.54.49.214:8080/selectdata.php',
			type: 'get',
			data: {
				type: "province"
			},
			dataType: "json",
			success:function(data){
				var obj={
					title: "--请选择省--",
					list:[]
				}
				for (var i = 0; i < data.length; i++) {
					var str={};
					str.id=data[i].id;
					str.province=data[i].province;
					obj.list[i]=str;
				}
				var html=template("ten",obj);
				var box=document.getElementById('se1');
				box.innerHTML=html;
			}
		});
		$('#se1').change(function(){
			console.log(this.value);
			$.ajax({
				url:'http://106.54.49.214:8080/selectdata.php?flag='+this.value,
				type: 'get',
				data: {
					type: "city"
				},
				dataType: "json",
				success:function(data){
					var obj={
						title: "--请选择市--",
						list:[]
					}
					for (var i = 0; i < data.length; i++) {
						var str={};
						str.id=data[i].id;
						str.province=data[i].city;
						obj.list[i]=str;
					}
					var html=template("ten",obj);
					var box=document.getElementById('se2');
					box.innerHTML=html;
				}
			});
		});
		$('#se2').change(function(){
			console.log(this.value);
			$.ajax({
				url:'http://106.54.49.214:8080/selectdata.php?flag='+this.value,
				type: 'get',
				data: {
					type: "county"
				},
				dataType: "json",
				success:function(data){
					var obj={
						title: "--请选择区--",
						list:[]
					}
					for (var i = 0; i < data.length; i++) {
						var str={};
						str.id=data[i].id;
						str.province=data[i].county;
						obj.list[i]=str;
					}
					/*console.log(data);*/
					var html=template("ten",obj);
					var box=document.getElementById('se3');
					box.innerHTML=html;
				}
			});
		});
	</script>
</body>
</html>```