三级联动

首页 > 代码库 > 三级联动

2024-09-22 00:50:36 221人阅读

做一个主界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script>   //引入js包
<script src="http://www.mamicode.com/sanji.js"></script>                 //引入sanji的js文件
<title>无标题文档</title>
</head>

<body>

<div id="sanji"></div>                 做一个id为sanji的div

</body>
</html>

sanji.js文件一定要捋好逻辑

 1 // JavaScript Document
 2 $(document).ready(function(e) {
 3     //找到ID=SANJI的DIV，造三个下拉扔进去
 4     $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");
 5     
 6     //加载省的数据
 7     LoadSheng();
 8     //加载市的数据
 9     LoadShi();
10     //加载区的数据
11     LoadQu();
12     
13     //给省的下拉加点击事件
14     $("#sheng").click(function(){
15             //重新加载市
16             LoadShi();
17             //重新加载区
18             LoadQu();
19         })
20     //给市的下拉加点击事件
21     $("#shi").click(function(){
22             //重新加载区
23             LoadQu();
24         })
25     
26 });
27 //加载省份的方法
28 function LoadSheng()
29 {
30     //省的父级代号
31     var pcode = "0001";
32     $.ajax({
33         async:false,
34         url:"chuli.php",
35         data:{pcode:pcode},
36         type:"POST",
37         dataType:"TEXT",
38         success: function(data){
39             var hang = data.trim().split("|");
40             var str = "";
41             for(var i=0;i<hang.length;i++)
42             {
43                 var lie = hang[i].split("^");
44                 str = str+"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";
45             }
46             $("#sheng").html(str);
47         }
48     });
49 }
50 //加载市的方法
51 function LoadShi()
52 {
53     //找市的父级代号
54     var pcode = $("#sheng").val();
55     $.ajax({
56         async:false,
57         url:"chuli.php",
58         data:{pcode:pcode},
59         type:"POST",
60         dataType:"TEXT",
61         success: function(data){
62             var hang = data.trim().split("|");
63             var str = "";
64             for(var i=0;i<hang.length;i++)
65             {
66                 var lie = hang[i].split("^");
67                 str = str+"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";
68             }
69             $("#shi").html(str);
70         }
71     });
72 }
73 
74 //加载区的方法
75 function LoadQu()
76 {
77     //找区的父级代号
78     var pcode = $("#shi").val();
79     $.ajax({
80         url:"chuli.php",
81         data:{pcode:pcode},
82         type:"POST",
83         dataType:"TEXT",
84         success: function(data){
85             var hang = data.trim().split("|");
86             var str = "";
87             for(var i=0;i<hang.length;i++)
88             {
89                 var lie = hang[i].split("^");
90                 str = str+"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";
91             }
92             $("#qu").html(str);
93         }
94     });
95 }

处理页面

<?php
//给我一个父级代号，返回该父级代号下所有的子地区
$pcode = $_POST["pcode"];
require "DBDA.class.php";
$db = new DBDA();

$sql = "select areacode,areaname from chinastates where parentareacode=‘{$pcode}‘";

echo $db->strquery($sql);

运行主界面就可以显示三级联动

下面这是我自己写的，然后又加的补充，代码冗长，不易阅读，最主要的是代码的重复量极高

代码如下

主页面

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script src="http://www.mamicode.com/jquery-3.2.0.js"></script>
  7 </head>
  8 
  9 <body>
 10 
 11     中国
 12     <select id="sheng"></select>
 13     <select id="shi"></select>
 14     <select id="qu"></select>
 15 
 16 </body>
 17 <script type="text/javascript">
 18     $(document).ready(function(e) {
 19         $.ajax({
 20             async:false,
 21             url:"0513shengcl.php",
 22             data:"TEXT",
 23             success: function(data){
 24                 var hang = data.split("|");
 25                 var str="";
 26                 for(var i=0;i<hang.length;i++)
 27                 {
 28                     var lie = hang[i].split("^");
 29                     str = str +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
 30                 }    
 31                 $("#sheng").html(str);
 32             }
 33         })
 34     });
 35     $(document).ready(function(e) {
 36         
 37         var b = $("#sheng").val();
 38         //alert(b);
 39                 $.ajax({
 40                 async:false,
 41                 url:"0513shicl.php",
 42                 data:{b1:b},
 43                 type:"POST",
 44                 dataType:"TEXT",
 45                 success: function(data1){
 46                     var hang1 = data1.split("|");
 47                     var str1="";
 48                     for(var i=0;i<hang1.length;i++)
 49                     {
 50                         var lie = hang1[i].split("^");
 51                         str1 = str1 +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
 52                     }    
 53                     $("#shi").html(str1);    
 54                 }
 55             })
 56         
 57    })
 58    $(document).ready(function(e) {
 59     var c = $("#shi").val();
 60                 $.ajax({
 61                 async:false,
 62                 url:"0513qucl.php",
 63                 data:{c1:c},
 64                 type:"POST",
 65                 dataType:"TEXT",
 66                 success: function(data2){
 67                     var hang2 = data2.split("|");
 68                     var str2="";
 69                     for(var i=0;i<hang2.length;i++)
 70                     {
 71                         var lie = hang2[i].split("^");
 72                         str2 = str2 +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
 73                     }    
 74                     $("#qu").html(str2);    
 75                 }
 76             })    
 77     
 78     });
 79 
 80     
 81     //改变
 82     
 83     $("#sheng").click(function(){
 84     $(document).ready(function(e) {
 85         
 86         var b = $("#sheng").val();
 87         //alert(b);
 88                 $.ajax({
 89                 async:false,
 90                 url:"0513shicl.php",
 91                 data:{b1:b},
 92                 type:"POST",
 93                 dataType:"TEXT",
 94                 success: function(data1){
 95                     var hang1 = data1.split("|");
 96                     var str1="";
 97                     for(var i=0;i<hang1.length;i++)
 98                     {
 99                         var lie = hang1[i].split("^");
100                         str1 = str1 +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
101                     }    
102                     $("#shi").html(str1);    
103                 }
104             })
105         
106    })
107     
108     $(document).ready(function(e) {
109     //alert(c);
110         var c = $("#shi").val();
111                 $.ajax({
112                 async:false,
113                 url:"0513qucl.php",
114                 data:{c1:c},
115                 type:"POST",
116                 dataType:"TEXT",
117                 success: function(data2){
118                     var hang2 = data2.split("|");
119                     var str2="";
120                     for(var i=0;i<hang2.length;i++)
121                     {
122                         var lie = hang2[i].split("^");
123                         str2 = str2 +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
124                     }    
125                     $("#qu").html(str2);    
126                 }
127             })    
128     
129     });
130     })
131     $("#shi").click(function(){
132     //alert(c);
133         var c = $("#shi").val();
134                 $.ajax({
135                 async:false,
136                 url:"0513qucl.php",
137                 data:{c1:c},
138                 type:"POST",
139                 dataType:"TEXT",
140                 success: function(data2){
141                     var hang2 = data2.split("|");
142                     var str2="";
143                     for(var i=0;i<hang2.length;i++)
144                     {
145                         var lie = hang2[i].split("^");
146                         str2 = str2 +"<option value=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>"    ;
147                     }    
148                     $("#qu").html(str2);    
149                 }
150             })    
151     
152     });
153 </script>
154 </html>

处理页面，写了三个，因为相似就给了一个

<?php
require "DBDA.class.php";
$db = new DBDA();
$sql = "select AreaCode,AreaName,ParentAreaCode from chinastates where ParentAreaCode=‘0001‘";
$arr = $db->StrQuery($sql);
echo $arr;

三级联动

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 三级联动

三级联动

看完仍有疑问？有类似问题直接问程序猿