From 71d37fac5fd91d0aab3a3e666a5b5a87838f50f5 Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Mon, 1 May 2023 21:33:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90,=E6=9C=89b?=
 =?UTF-8?q?ug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.html                                | 14 +++-
 .../js/index.js                               | 80 +++++++++++++------
 2 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
index c327cc7..c92cf06 100644
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
@@ -13,10 +13,10 @@
     <div>
         <form>
             省份：
-            <select name="province" id="province" onchange="showCity()">
+            <select name="province" id="province">
                 <option value="0">--请选择--</option>
             </select>&nbsp;&nbsp; 城市：
-            <select name="city" id="city" onchange="showArea()">
+            <select name="city" id="city">
                 <option value="0">--请选择--</option>
             </select>&nbsp;&nbsp; 地区：
             <select name="area" id="area">
@@ -28,6 +28,16 @@
 <script>
     $(function(){
         getCountry();
+        
+        $("#province").change(function(){
+            CountryId=$("#province").val();
+            // console.log(FatherId);
+            getCity(CountryId);
+            CityID=$("#city").val();
+            console.log(CityID);
+            getArea(CityID);
+        });
+
     })
 </script>
 </html>
\ No newline at end of file
diff --git a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
index 7b90326..90bda0b 100644
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
@@ -1,13 +1,32 @@
-function getCountry(code){
-        $.ajax({
-            url : './json/third-level-address.json',
-		    type : 'get',
-		    async: false,
-		    success : function(data) {
-			if(data=="error"){
-				alert("系统错误");
-				return;
-			}
+
+function getData(){
+    $.ajax({
+        url : './json/third-level-address.json',
+        type : 'get',
+        async: false,
+        success : function(data) {
+        if(data=="error"){
+            alert("系统错误");
+            return;
+        }
+        dataJson=data;
+     }
+    });
+    return dataJson;
+}
+
+
+function getCountry(){
+        // $.ajax({
+        //     url : './json/third-level-address.json',
+		//     type : 'get',
+		//     async: false,
+		//     success : function(data) {
+		// 	if(data=="error"){
+		// 		alert("系统错误");
+		// 		return;
+		// 	}
+            var data = getData();
             var country = new Array();
             var children = new Array();
             var countryCode=new Array();
@@ -16,25 +35,38 @@ function getCountry(code){
                 country.push(tmp.name);
                 children.push(tmp.children);
              });
-            $('#country').show().html(country);
-            // console.log(children);
+            //  for(var i in data){
+            //     console.log(data[i].children[0].children[0].code);
+            //  }
+            // console.log(data[0].children[1].name);
             var options = "<option value='0'>--请选择--</option>";
             for(var i in data){
-				if(code && code == data[i].code ){
-					options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>";
-				}else{
-					options += "<option value='" + data[i].code + "' >" + data[i].name+"</option>";
-				}
+				options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>";
                 $("#province").html(options);
                 // console.log(data[i].code);
 			}
-        },
-        error : function(data) {
-            html = "<option value='0'>--请选择--</option>";
         }
-        })
+
+function getCity(countryCode){
+    var data = getData();
+    $('#city').empty();
+    var options = "<option value='0'>--请选择--</option>";
+			for(var i in data){
+				if(countryCode && countryCode == data[i].code){
+					options += "<option value='" + data[i].children[0].code + "' selected>" + data[i].children[0].name+"</option>";
+				}
+				$("#city").html(options);
+			}
+			
 }
-
-function showCity(){
-
+function getArea(cityCode){
+    var data = getData();
+    var options = "<option value='0'>--请选择--</option>";
+    for(var i in data){
+        if(cityCode && cityCode == data[i].children[0].code){
+            options += "<option value='" + data[i].children[0].children[0].code + "' selected>" + data[i].children[0].children[0].name+"</option>";
+        }
+        $("#area").html(options);
+    }
+    
 }
\ No newline at end of file