更新

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

@@ -4,4 +4,4 @@ form {
 
 select {
     width: 150px;
-}
+}

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

@@ -25,4 +25,9 @@
         </form>
     </div>
 </body>
+<script>
+    $(function(){
+        getCountry();
+    })
+</script>
 </html>

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

@@ -1,55 +1,40 @@
-var xmlDom = null;
+function getCountry(code){
+        $.ajax({
+            url : './json/third-level-address.json',
+		    type : 'get',
+		    async: false,
+		    success : function(data) {
+			if(data=="error"){
+				alert("系统错误");
+				return;
+			}
+            var country = new Array();
+            var children = new Array();
+            var countryCode=new Array();
+            $.each(data,function(i,tmp){
+                countryCode.push(tmp.code);
+                country.push(tmp.name);
+                children.push(tmp.children);
+             });
+            $('#country').show().html(country);
+            // console.log(children);
+            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() {
-        showProvince();
-    });
+function showCity(){
 
-    function showProvince() {
-        //ajax去服务器把信息请求回来
-        //从中筛选省份信息并显示
-        $.get('./ChinaArea.xml', function(msg) {
-            xmlDom = msg;
-            //对服务器返回的xml信息处理
-            //需要从最大的XMLDocument结点获得province结点
-            //province是XMLDocunment的子节点
-            $(msg).find('province').each(function(k, v) {
-                //this代表每个province的dom对象
-                //获得省份的名称并显示给下拉列表
-                var nm = $(this).attr('province');
-                var id = $(this).attr('provinceID');
-                //给select追加option
-                $('#province').append('<option value="' + id + '">' + nm + '</option>');
-            });
-        }, 'xml');
-    }
-
-    //根据选择的省份选择显示城市
-    function showCity() {
-        //获取选取的省份的id信息
-        var twoPid = $('#province option:selected').val().substr(0, 2);
-        //清除旧的结点
-        $('#city').empty();
-        //获得选取省份下的城市信息
-        //限制条件，City标签，本身id前两位和省份id一致
-        //遍历City信息并显示到页面上
-        $(xmlDom).find('City[CityID^=' + twoPid + ']').each(function() {
-            var name = $(this).attr('City');
-            var id = $(this).attr('CityID');
-            $('#city').append('<option value="' + id + '">' + name + '</option>'); //追加
-        });
-
-    }
-    //显示区县的方法和上面的类似
-    function showArea() {
-
-        var fourPid = $('#city option:selected').val().substr(0, 4);
-
-        $('#area').empty();
-
-        $(xmlDom).find('Piecearea[PieceareaID^=' + fourPid + ']').each(function() {
-            var name = $(this).attr('Piecearea');
-            var id = $(this).attr('PieceareaID');
-
-            $('#area').append('<option value="' + id + '">' + name + '</option>');
-        });
-    }
+}