基本完成,有bug

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>

Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js

@@ -1,4 +1,5 @@
-function getCountry(code){
+
+function getData(){
     $.ajax({
         url : './json/third-level-address.json',
         type : 'get',
@@ -8,6 +9,24 @@ function getCountry(code){
             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);
+            //  for(var i in data){
-            // console.log(children);
+            //     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>";
-				}
                 $("#province").html(options);
                 // console.log(data[i].code);
 			}
-        },
-        error : function(data) {
-            html = "<option value='0'>--请选择--</option>";
         }
-        })
-}
 
-function showCity(){
+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 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);
+    }
     
 }