刚开始接触php，，其实对于一些比较深入的东西还不是很了解，就像是这次的省市区联动，都是用三张表为基础编码的，原谅我的无知，谢谢。

接下来就是编码部分了：

<?php

require('./smarty/Smarty.class.php');

date_default_timezone_set("PRC");

$conn = mysql_connect("localhost","root","123456");

mysql_select_db("dbcity");

mysql_query("set names utf8");

$sql = " select pid,pname  from province";

$result = mysql_query($sql,$conn);

while ($rs = mysql_fetch_assoc($result)){

    $list[] = array("pid" => $rs["pid"],"pname" => $rs["pname"]);

}

$sql2 = "select cid,cname from city where pid={$list[0]['pid']}";

$result2 = mysql_query($sql2,$conn);

while($rs2 = mysql_fetch_assoc($result2)){

    $list2[] = array("cname" => $rs2["cname"],"cid" =>$rs2["cid"]);

}

$sql3 = "select xname,xid from xian where cid={$list2[0]['cid']}";

$result3 = mysql_query($sql3,$conn);

while($rs3 = mysql_fetch_assoc($result3)){

    $list3[] = array("xname" => $rs3["xname"]);

}

$smarty = new Smarty();

$smarty->left_delimiter='<{';//左边界符

$smarty->right_delimiter='}>';//右边界符

$smarty ->assign("content",$list);

$smarty ->assign("name",$list2);

$smarty ->assign("xian",$list3);

$smarty ->display("show.html");

?>

以上是为了从数据库中把所有的先加载出来，主要就是用到smarty，数组。其他的都没有什么可以深究的了，可以看到上面代码的最后一句话就是为了跳转到smarty的模板页面show.html

接下来我们来共同看一下模板页面的书写代码：

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="UTF-8">

 5 <title>省市级联</title>

 6 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 7 <script type="text/javascript">

 8 $(function(){

 9     $("#province").change(function() {

10         var province = $("#province").val();

11         alert(province);

12         $.ajax({

13             url: 'display.php',

14             type: 'GET',

15             data: {'category':'city', city:province},

16             dataType:'json',

17             success: function(data){

18                 var content = '';

19                 for (var i in data) {

20                     content += '<option value='+data[i].cid+'>'+data[i].cname+'</option>';

21                 }

22                 $('#city').html(content);

23             }

24         });  //  'abc."$age".def'

25     });

26     $("#city").change(function(){

27         var city = $("#city").val();

28         alert(city);

29         $.ajax({

30             url:'assign.php',

31             type:'GET',

32             data:{'category':'xian',xian:city},

33             dataType:'json',

34             success:function(data){

35                 var content = '';

36                 for(var i in data){

37                     content +='<option>'+data[i].xname+'</option>';

38                 }

39                 $('#xian').html(content);

40             }

41         })

42     })

43 })

44 </script>

45 </head>

46 <body>

47   选择省份:<select name="province" id="province" style="width:100px;" onclick="click" >

48   <{foreach from=$content key=k item=value}>

49        <option value="<{$value.pid}>"><{$value.pname}></option>

50   <{/foreach}>

51   </select>  <br/>

52   选择城市:<select name="city" id="city" style="width:100px;">

53

54   <{foreach from=$name  item=value2}>

55        <option value="<{$value2.cid}>"><{$value2.cname}></option>

56   <{/foreach}>

57   </select><br/>

58     选择县城:<select name="xian" id="xian" style="width:100px;">

59

60   <{foreach from=$xian  item=value3}>

61        <option><{$value3.xname}></option>

62   <{/foreach}>

63   </select><br/>

64 </body>

65 </html>

这里的命名不是规范，希望不要误导大家，，大家在自己编写代码的时候还是要注意自己的编码规范的。首先，我们可以看到“选择省份”的select标签，这里我们就是根据index.php页面传过来的数组利用foreach进行循环遍历，遍历出省份的id，省份名称。在这里，省份的id是必不可少的，因为它牵扯到接下来select的change事件，所以一定要注意这个地方。接下来就是异步提交的ajax事件了，我们根据之前给select的id叫做province来做他的change事件，这里ajax大家就要自己对ajax进行学习了，其实，在php里面使用smarty模板引擎是为了将后台代码与前台展示代码分离开来，但是这里为了大家能够看得仔细，所以将JavaScript代码放在页面里了，最好是在项目里面写一个JavaScript脚本然后进行导入，有利于页面的整洁，我们先看省份的ajax代码，我们在它的url属性里面让它进入到display.php页面，

so，接下来就是display页面的代码了

 1 <?php

 2 date_default_timezone_set("PRC");

 3 $conn = mysql_connect("localhost","root","123456");

 4 mysql_select_db("dbcity");

 5 mysql_query("set names utf8");

 6 if($_GET['category']){

 7    if($_GET["category"] != "") {

 8    //根据省份得到城市

 9    $sql = "select cid,cname from city where pid=".$_GET['city'];

10    $result = mysql_query($sql,$conn);

11    if (mysql_num_rows($result) > 0) {

12    while ($row = mysql_fetch_assoc($result)) {

13         $str[] = array("cid"=>$row["cid"],"cname"=>($row["cname"]));

14    }

15    //var_dump($str);

16    echo (json_encode($str));

17    }

18    mysql_free_result($result);

19   }

20 }

21

22

23 ?>

在这里，我们使用GET方法获取之前ajax传过来的参数，获取点击省份时候的id，根据这个id来获取这个省份下面的城市。当然了，之后的城市下面的区我们就显而易见了，但是特别要注意的是要把城市的select标签的value值获取获取出来，以便查询它所管辖的区。

assign.php代码如下

 1 <?php

 2 date_default_timezone_set("PRC");

 3 $conn = mysql_connect("localhost","root","123456");

 4 mysql_select_db("dbcity");

 5 mysql_query("set names utf8");

 6 if($_GET['category']){

 7     if($_GET["category"] != "") {

 8         //根据省份得到城市

 9         $sql = "select xid,xname from xian where cid=".$_GET['xian'];

10         $result = mysql_query($sql,$conn);

11         if (mysql_num_rows($result) > 0) {

12             while ($row = mysql_fetch_assoc($result)) {

13                 $str[] = array("id"=>$row["xid"],"xname"=>($row["xname"]));

14             }

15             //var_dump($str);

16             echo (json_encode($str));

17         }

18         mysql_free_result($result);

19     }

20 }

21 ?>

希望我的提示能够对你有所帮助，谢谢！

关于在smarty中实现省市区三级联动的更多相关文章

  1. Android中使用开源框架citypickerview实现省市区三级联动选择

    1．概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省 ...

  2. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  3. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  4. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  5. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  6. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  7. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  8. PHPOffice/PHPExcel生成省市区三级联动的excel表格

    最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...

  9. Ajax来实现下拉框省市区三级联动效果（服务端基于express）

    //服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

随机推荐

  1. js日期类型date

    javascript语言核心包括Date()构造函数,用来创建表示日期和时间的函数 //返回当前的日期和时间      var today = new Date();      //2011年1月1日 ...

  2. 用@vue/cli发布npm包

    1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...

  3. Hotkeys.js 2.0.2 发布，JS 网页快捷键设置，捕获键盘输入和输入的组合键快捷键，它没有依赖

    这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...

  4. C++ 学习笔记 （六） 继承- 子类与父类有同名函数，变量

    学习了类的继承,今天说一下当父类与子类中有同名函数和变量时那么程序将怎么执行.首先明确当基类和子类有同名函数或者变量时,子类依然从父类继承. 举例说明: 例程说明: 父类和子类有同名的成员 data: ...

  5. GNU汇编 程序状态字访问指令

    .text .global  _start _start: mrs r0,cpsr orr r0,#0b100 msr cpsr,r0

  6. 在kali上安装谷歌浏览器

    在kali上安装谷歌浏览器的时候,遇到了很多问题,经过不懈努力,终于解决,现在把方法总结一下,希望对遇到同样问题的人能有一定帮助.这是给最白的小白参考的,大牛勿喷哈. 首先去这个网站www.googl ...

  7. MySQL存储引擎MyISAM与InnoDB的区别比较

    使用MySQL当然会接触到MySQL的存储引擎,在新建数据库和新建数据表的时候都会看到. MySQL默认的存储引擎是MyISAM,其他常用的就是InnoDB了. 至于到底用哪种存储引擎比较好?这个问题 ...

  8. Bomb HDU - 3555 （数位DP）

    Bomb HDU - 3555 (数位DP) The counter-terrorists found a time bomb in the dust. But this time the terro ...

  9. [洛谷P1168]中位数（Splay）/（主席树）

    Description 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[2], -, A[2k - 1]的中位数.即前1,3,5,--个数的 ...

  10. Java并发模型框架

    构建Java并发模型框架 Java的多线程特性为构建高性能的应用提供了极大的方便,但是也带来了不少的麻烦.线程间同步.数据一致性等烦琐的问题需要细心的考虑,一不小心就会出现一些微妙的,难以调试的错误. ...