jq加载json数据实现三级联动

最新推荐文章于 2021-11-25 21:02:18 发布

weihe_7306

最新推荐文章于 2021-11-25 21:02:18 发布

阅读量983

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43360488/article/details/106879346

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>利用ajax实现地区三级联动</title>	
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<!-- 引入JQ库文件 -->
	<script type="text/javascript">	
		$(document).ready(function(){
     
			 
		    $.ajax({
   
		        url:"area.json",
		        type:"get",
		        dataType:"json",
		        success:function(data){
   
		            for(var key in data){
   
		            	console.log(key);
		                $("#provice").append("<option value="+key+">"+key+"</option>");
		            }

		            $("#provice").change(function(){
   
		                var now_provice=$("#provice option:selected").val();
		                $("#city").empty();
		                $("#city").append("<option>请输入城市</option>");
		                for(var key in data[now_provice]){
   
		                    $("#city").append("<option value="+key+">"+key+"</option>");
		                }

		                $("#city").change(function(){
   
			                var now_city=$("#city option:selected").val();
			                $("#area").empty();
			                $("#area").append("<option>请输入地区</option>");
			                for(var k in data[now_provice][now_city]){
   
			                	console.log(k);
			                    $("#area").append("<option value="+data[now_provice][now_city][k]+">"

最低0.47元/天解锁文章

weihe_7306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq加载json数据实现三级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用ajax实现地区三级联动</title> <script type="text/javascript" src="js/jquery-3.2.1.js"></script>  <script type="tex
复制链接

扫一扫