关于在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;" οnclick="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 <?php2 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 <?php2 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 ?>

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

转载于:https://www.cnblogs.com/chengzhi59/p/7146771.html

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

vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...
前端 vue中使用省市区三级联动
https://blog.csdn.net/qq_33769914/article/details/82878693
Java中省市区三级联动，附前后台及数据库
Java中省市区三级联动,附前后台及数据库实体pojo @Entity @Table(name = "province_city_district") @Data public ...
C# 实现省市区三级联动(表中包含经纬度取自淘宝地址管理)
老生常谈,就不用再多介绍省市区三级联动的用处了,直接上效果图: 前台代码: <asp:DropDownList ID="seachprov" runat="serv ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...

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

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

最新文章

热门文章