JSON

最新推荐文章于 2024-06-05 09:49:06 发布

严格要求自己

最新推荐文章于 2024-06-05 09:49:06 发布

阅读量119

点赞数

分类专栏： java web基础知识点文章标签： js javascript json jquery python

本文链接：https://blog.youkuaiyun.com/qq_43050847/article/details/106943719

版权

java web基础知识点专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用JSON和jQuery实现省、市、区的级联选择器，通过解析JSON数据并动态生成下拉菜单选项，实现多级联动效果。

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

文章目录

- json介绍
- json实现省市级联

json介绍

Json是前端中常用的格式(JavaScript Object Notation, JS 对象标记)
Json是js中的对象可以通过对象.属性的方法获取值

json实现省市级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/addr.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
				var selectedCity;
				//填充省数据

				$.each(temp, function(i, d) {
					var myoption = '<option value="' + d.code + '">' + d.label + '</option>';
					$("#selprov").append(myoption);
				})

				$("#selprov").change(function() {
					console.log($(this).val());
					var provcode = $(this).val();
					$("#selcity").html('<option>---------请选择--------</option>');
					$("#selcoun").html('<option>---------请选择--------</option>');
					$.each(temp, function(i, d) {
						if (d.code == provcode) {
							selectedCity = d.children;
							$.each(d.children, function(i, d) {
								var myoption = '<option value="' + d.code + '">' + d.label + '</option>';
								$("#selcity").append(myoption);
							})
						}
					})

				})
				$("#selcity").change(function() {
					console.log($(this).val());
					var cityCode = $(this).val();
					$("#selcoun").html('<option>---------请选择--------</option>');
					$.each(selectedCity, function(i, d) {
						if (d.code == cityCode) {
							$.each(d.children, function(i, d) {
								var myoption = '<option value="' + d.code + '">' + d.label + '</option>';
								$("#selcoun").append(myoption);
							})
						}

					})
				})

			})
		</script>
	</head>
	<body>
		<select id="selprov">
			<option>---------请选择--------</option>

		</select>
		<label>省</label>
		<select id="selcity">
			<option>---------请选择--------</option>

		</select>
		<label>市</label>
		<select id="selcoun">
			<option>---------请选择--------</option>

		</select>
		<label>县</label>
	</body>
</html>