关于在smarty中实现省市区三级联动

刚开始接触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 ?>

希望我的提示能够对你有所帮助,谢谢!

时间: 2024-11-09 02:24:52

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

js中的省市区三级联动

想要实现省市区的三级联动,首先需要的是一个下拉框,这个下拉框用我们的<select>标签就能实现,具体如下: <select id="province" onchange="chooseProvince(this)"> <option value="1">请选择省</option> </select><select id="city" onchange=&quo

thinkphp中实现省市区三级联动菜单

数据库文件:http://pan.baidu.com/s/1dDEkTLB 1, <script language="javascript" type="text/javascript" src="jquery.js"></script> 2, <script>function setChild(parent_node, parent_id) {  if('city_id' == parent_node) {

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

http://www.cnblogs.com/zjfree/p/3269864.html 今天收到园友信息,想问我要原来写的一个 < 纯JS省市区三级联动 >文章中最新的省市区数据. 那个是老早以前搞的.记得数据是从数据库中提取生成的.一时也找不到当时的数据库了. 我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)

近期在实现收货地址功能,用到了省市区三级联动效果,网上找到一般都是xml或json.数据源陈旧改动麻烦.改动了一下使用数据库方式实现了一下 数据源解决.因为数据量比較大通过初始化批量运行SQL的方式不合适,费时不说还easy出错,我採用的是在电脑上创建好数据库然后把数据库文件放到程序里边,通过以下这种方法能够把db文件复制到随意文件夹下.demo中我把文件放在了raw文件夹下 /** * * @param inStream * @param fileNme 文件名称 * @param newPa