更新

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({
-    $(function() {
+            url : './json/third-level-address.json',
-        showProvince();
+		    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);
-    function showProvince() {
+            // console.log(children);
-        //ajax去服务器把信息请求回来
+            var options = "<option value='0'>--请选择--</option>";
-        //从中筛选省份信息并显示
+            for(var i in data){
-        $.get('./ChinaArea.xml', function(msg) {
+				if(code && code == data[i].code ){
-            xmlDom = msg;
+					options += "<option value='" + data[i].code + "' selected>" + dataJson[i].name+"</option>";
-            //对服务器返回的xml信息处理
+				}else{
-            //需要从最大的XMLDocument结点获得province结点
+					options += "<option value='" + data[i].code + "' >" + data[i].name+"</option>";
-            //province是XMLDocunment的子节点
+				}
-            $(msg).find('province').each(function(k, v) {
+                $("#province").html(options);
-                //this代表每个province的dom对象
+                // console.log(data[i].code);
-                //获得省份的名称并显示给下拉列表
+			}
-                var nm = $(this).attr('province');
+        },
-                var id = $(this).attr('provinceID');
+        error : function(data) {
-                //给select追加option
+            html = "<option value='0'>--请选择--</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>');
-        });
-    }