init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/ChinaArea.xml
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/ChinaArea.xml
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/css/index.css
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/css/index.css
@@ -0,0 +1,7 @@
+form {
+    text-align: center;
+}
+
+select {
+    width: 150px;
+}
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+    <link href="./css/index.css" rel="stylesheet" type="text/css"/>
+    <script src="./js/index.js"></script>
+    <title>基于jQuery的AJAX实现三级联动菜单</title>
+</head>
+<body>
+    <div>
+        <form>
+            省份：
+            <select name="province" id="province" onchange="showCity()">
+                <option value="0">--请选择--</option>
+            </select>&nbsp;&nbsp; 城市：
+            <select name="city" id="city" onchange="showArea()">
+                <option value="0">--请选择--</option>
+            </select>&nbsp;&nbsp; 地区：
+            <select name="area" id="area">
+                <option value="0">--请选择--</option>
+            </select>
+        </form>
+    </div>
+</body>
+</html>
--- a/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
+++ b/Html-practice/Ajax/基于jQuery的AJAX实现三级联动菜单/js/index.js
@@ -0,0 +1,55 @@
+var xmlDom = null;
+
+    $(function() {
+        showProvince();
+    });
+
+    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>');
+        });
+    }