关于在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 ?>
希望我的提示能够对你有所帮助,谢谢!
关于在smarty中实现省市区三级联动的更多相关文章
- Android中使用开源框架citypickerview实现省市区三级联动选择
1.概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省 ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- 使用腾讯IP分享计划网站中的纯JS省市区三级联动
JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...
- 省市区三级联动 pickerView
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- PHPOffice/PHPExcel生成省市区三级联动的excel表格
最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...
- Ajax来实现下拉框省市区三级联动效果(服务端基于express)
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
随机推荐
- mongodb索引 全文索引
全文索引,也叫文本索引,平时,我们百度的搜索,比如api文档的搜索,这种全局的索引就可以使用全文索引实现 全文索引:对字符串与字符串数组创建全文可搜索对索引 使用情况:比如有一个数据集合,存储了用户的 ...
- MicroService 微服务提供者搭建
本机IP为 192.168.1.102 1. 新建Maven项目 microservice 2. pom.xml <project xmlns="http://maven. ...
- C#赋值运算符
一.C#赋值运算符 C#语言的赋值运算符用于将一个数据赋予一个变量.属性或者引用.数据可以是常量.变量或者表达式. 1. 简单赋值 “=”操作符被称为简单赋值操作符.在一个简单赋值中,右操作数必须为某 ...
- FTP、SFTP与FTPS
先简单介绍下FTP的基础知识 FTP的传输有两种方式:ASCII.二进制. FTP支持两种模式:Standard (PORT方式,主动方式),Passive (PASV,被动方式). 主动模式 FTP ...
- Linux更改文件权限(二)
更改文件权限(二)============================== (参考于千锋教育教学笔记) 命令umask [root@aminglinux ~]# umask 0022 [root@ ...
- windows 解决缺失.dll的问题
1.缺失MSVCR120.dell和MSVCP120.dll,如图: 这种问题是因为没有Microsoft Visual C++ 2013运行库的问题,自行百度在Microsoft官网下载即可,注意需 ...
- 【PHP】PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
php编程中有时候会需要用上排序,在这里简单地整理一下集中sort的区别,方便查询 sort() 函数用于对数组单元从低到高进行排序. rsort() 函数用于对数组单元从高到低进行排序. asort ...
- ubuntu 压缩 解压 命令大全
ubuntu下文件压缩/解压缩命令总结 http://blog.csdn.net/luo86106/article/details/6946255 .gz 解压1:gunzip FileName.gz ...
- 力扣题目汇总(丑数,重复N的元素,求众数)
丑数 1.题目描述 编写一个程序判断给定的数是否为丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例 1: 输入: 6 输出: true 解释: 6 = 2 × 3 示例 2: 输入: 8 ...
- MongoDB集群部署 - 带访问控制的分片副本集
1. 前言 Ceilometer将meter.event等数据保存在MongoDB中,之前将MongoDB部署在控制节点上,使用三副本模式,时间长了发现meter数据爆炸式增长,区区2T的磁盘捉襟见肘 ...