1、查询数据库以三级联动形式显现

  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 
  7 <script src="jquery-1.11.2.min.js"></script>
  8 <script src="sj.js"></script>
  9 </head>
 10 
 11 <body>
 12 <h1> 三级联动查询 </h1>
 13 
 14 <div id="sanji"></div>
 15 </body>
 16 </html>
 17 
 18 //自己写的JS包
 19 
 20 $(document).ready(function(e) {
 21     
 22     //在DIV里面造三个下拉
 23     $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 24     
 25     //填充数据
 26     FillSheng(); //填充省的数据
 27     FillShi(); //填充市的数据
 28     FillQu(); //填充区的数据
 29 
 30     //填充省的方法
 31     function FillSheng()
 32     {
 33         var code = "0001"; //省的父级代号
 34         //调用ajax查询省的数据
 35         $.ajax({
 36             
 37             async:false, //变为同步AJAX
 38             url:"cls.php",
 39             data:{code:code},
 40             type:"POST",
 41             dataType:"TEXT",
 42             success: function(data){
 43                     //拆分字符串，返回行的数组
 44                     var hang = data.split("|");
 45                     var str = "";
 46                     for(var i=0;i<hang.length;i++)
 47                     {
 48                         var lie = hang[i].split("^");
 49                         
 50                         //var a=lie[0].trim();
 51                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 52                     }
 53                     //将所有的option放到省下拉里面
 54                     $("#sheng").html(str);
 55                 }
 56             
 57             });
 58     }
 59     
 60     //填充市的方法
 61     function FillShi()
 62     {
 63         var code = $("#sheng").val(); //市的父级代号
 64 
 65         //调用ajax查询省的数据
 66         $.ajax({
 67             
 68             async:false, //变为同步AJAX
 69             url:"cls.php",
 70             data:{code:code},
 71             type:"POST",
 72             dataType:"TEXT",
 73             success: function(data){
 74         
 75                     //拆分字符串，返回行的数组
 76                     var hang = data.split("|");
 77                     var str = "";
 78                     for(var i=0;i<hang.length;i++)
 79                     {
 80                         var lie = hang[i].split("^");
 81                         //var a = lie[0].trim();
 82                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
 83                     }
 84                     //将所有的option放到省下拉里面
 85                     $("#shi").html(str);
 86                 }
 87             
 88             });
 89     }
 90     
 91     //填充区的方法
 92     function FillQu()
 93     {
 94         var code = $("#shi").val(); //区的父级代号
 95         //调用ajax查询省的数据
 96         $.ajax({
 97             
 98             async:false, //变为同步AJAX
 99             url:"cls.php",
100             data:{code:code},
101             type:"POST",
102             dataType:"TEXT",
103             success: function(data){
104                     //拆分字符串，返回行的数组
105                     var hang = data.split("|");
106                     var str = "";
107                     for(var i=0;i<hang.length;i++)
108                     {
109                         var lie = hang[i].split("^");
110                         
111                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
112                     }
113                     //将所有的option放到省下拉里面
114                     $("#qu").html(str);
115                 }
116             
117             });
118     }
119     
120     //当省的选中发生变化的时候，去改变市和区
121     $("#sheng").change(function(){
122             FillShi();
123             FillQu();
124         })
125         
126     //当市的选中发生变化的时候，去改变区
127     $("#shi").change(function(){
128             FillQu();
129         })
130 });
131 
132 //处理页面
133 <?php
134 include("haoyou.php");
135 $db= new haoyou();
136 
137 $pcode=$_POST["code"];
138 $sql="select AreaCode,AreaName from chinastates where ParentAreaCode='{$pcode}'";
139 
140 echo $db->strquery($sql);
posted on 2016-04-10 08:35 悠悠小花阅读(1048) 评论(0) 收藏举报