设计模式：ajax实现，数据库格式：id,name,parent_id

数据库：

CREATE TABLE IF NOT EXISTS `city` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `name` varchar(30) DEFAULT NULL,

  `parent_id` int(11) DEFAULT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=26 ;

INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES

(1, '安徽', 0),

(2, '浙江', 0),

(3, '亳州', 1),

(4, '合肥', 1),

(5, '巢湖', 1),

(6, '涡阳', 3),

(7, '蒙城', 3),

(8, '利辛', 3),

(9, '谯城', 3),

(10, '杭州', 2),

(11, '宁波', 2),

(12, '温州', 2),

(13, '义乌', 2),

(14, '嘉兴', 2),

(15, '巢湖', 4),

(16, '阜阳', 1),

(17, '界首', 16),

(18, '泥鳅', 16),

(19, '拱墅区', 10),

(20, '江干区', 10),

(21, '临湖镇', 6),

(22, '立德镇', 5),

(23, '标里镇', 6),

(24, '花沟镇', 6),

(25, '义门镇', 6);

HTML代码：

<html>

<head>

<meta http-equiv="content-type" content="text/html" charset="utf-8">

<style type="text/css">

h2{

    text-align:center;

    color:red;

}

.div{

    width:500px;

    height:300px;

    border:1px solid gray;

    margin:auto;

    text-align:center;

    padding-top:30px;

}

.div select{

    width:80px;

    height:25px;

    color:green;

}

</style>

</head>

<script type="text/javascript">

function deal(value,next){

    var Next=document.getElementById(next);

    //删除节点

    var oP=Next.getElementsByTagName("option");

    for(var i=oP.length-1;i>=1;i--){

            oP[i].parentNode.removeChild(oP[i]);

        }

    //创建ajax引擎

    var xmlhttp="";

    if(window.XMLHttpRequest){

        xmlhttp=new XMLHttpRequest();

    }else{

        xmlhttp=new ActiveXObject("Microsoft.XMLHttp");

    }

    //判断状态是否满足条件

    xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readyState==4&&xmlhttp.status==200){

            var val=xmlhttp.responseText;

//             alert(val);

            var object=eval("("+val+")");

            for(var k in object){

                //创建节点

                var oPt=document.createElement("option");

                //添加属性和值

                oPt.setAttribute('value',object[k]['name']);

                Next.appendChild(oPt);

                oPt.innerHTML=object[k]['name'];

            }

            }

        }

    var url="deal.php";

    var data="name="+value;

    //打开

    xmlhttp.open("post",url,true);

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须加上

    //发送数据

    xmlhttp.send(data);

}

window.onload=function(){

    deal(null,"sheng");

}

</script>

<body>

    <h2>省市联动AJAX实现</h2>

    <div class="div">

        <form action="Act.php" method="post">

            <!-- 省级标签 -->

            <select name="sheng" id="sheng" onchange="deal(this.value,'shi')">

            <option>省</option>

            </select>

            <!-- 市级标签 -->

            <select name="shi" id="shi" onchange="deal(this.value,'xian')">

            <option>市</option>

            </select>

            <!-- 县级标签 -->

            <select name="xian" id="xian" onchange="deal(this.value,'zhen')">

            <option>县</option>

            </select>

            <!-- 镇级标签 -->

            <select name="zhen" id="zhen">

            <option>镇</option>

            </select>

            <input type="submit" value="提交"/>

        </form>

    </div>

</body>

</html>

php后台处理：

<?php

header("content-type:text/html;charset=utf-8");

$name=$_POST['name'];

//连接数据库

$conn=mysqli_connect("localhost","root","");

if(!$conn){

    die("连接数据库失败");

}

//设置字符集

mysqli_query($conn, "set names utf8");

//选择数据库

mysqli_select_db($conn, "city");

$sql="select id from city where name="."'$name';";

$res=mysqli_query($conn, $sql);

if(mysqli_num_rows($res)>0){

    $row=mysqli_fetch_assoc($res);

    $id=$row['id'];

}else{

    $id=0;

}

$sql="select * from city where parent_id=".$id;

$res=mysqli_query($conn, $sql);

$arr=array();

if(mysqli_num_rows($res)>0){

    while($row=mysqli_fetch_assoc($res)){

        $arr[]=$row;

    }

}

foreach ($arr as $k=>$v){

    @$str.='{"name":'.'"'.$v['name'].'","parent_id":'.'"'.$v['parent_id'].'","id":'.'"'.$v['id'].'"},';

}

echo "[".$str."]";

// echo '[{"name":"安徽","parent_id":"0"},{"name":"浙江","parent_id":"0"},{"name":"吉林","parent_id":"0"},]';

?>

实现效果：

php省市联动实现的更多相关文章

  1. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  2. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  3. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）

    我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...

  5. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  6. 通过Javascript数组设计一个省市联动菜单

    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...

  7. Ado.Net小练习03（省市联动）

    前台界面:          后台代码: namespace _04省市联动 {     public partial class Form1 : Form     {         public ...

  8. Ajax省市联动

    以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  10. jquery插件-省市联动

        由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个.     首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...

随机推荐

  1. Modelsim command line 传参数到 .do 文件

    gui跑mdelsim总觉得很麻烦,使用命令来启动方便了很多,类似linux一样,其实目前windows也可以做到,只是业界不怎么用windows罢了. 基于modelsim搭了一个UVM环境,  用 ...

  2. 简单实用的分页类-python

    django自带的分页虽然挺好,但是就想自己弄个通用的 自己写了个分页的类,用的是python,   其他语言改下语法就能用了. #定义好类.class pagemanage: def __init_ ...

  3. 云笔记项目-Spring事务学习_测试准备

    在做云笔记项目的过程中,顺便简单的学习了Spring的事务概念,业务以如果添加笔记,则增加用户星星数目作为例子,引入了事务的概念.类似注册送积分之类的,云笔记项目以增加笔记就送星星来说明事务.具体在添 ...

  4. mysql case when then else end 写法

    今天改SQL用到了就搜了搜,现在记下来. case when tableName.type in (1,2,3,4) and tableName.state  in (5,6) then 1 when ...

  5. python中获取python版本号的方法

    import platform print platform.python_version()

  6. 小强学渲染之OpenGL的CPU管线

    读到这里,应该对OpenGL渲染管线有了初步简单了解.下面着重分析CPU管线,即逻辑控制中心做了什么,这部分还是容易理解的.如下图: 一,将数据加载到显存中. 这是由GPU是访问显存中的数据决定的.因 ...

  7. 高级编程T-SQL函数

    --字符串函数--1.LEN:返回一个字符串的字符数select LEN('中国'),LEN('abc123!')select LEN('abc '+'1'),LEN(' abc')--2.DataL ...

  8. SpringBoot集成Jasypt安全框架,配置文件内容加密

    我们在SpringBoot项目中的yml或者properties配置文件中都是明文的,相对而言安全性就低了很多.都知道配置文件中的都是一些数据库连接用户名密码啊.一些第三方密钥等信息.所以我们谨慎点, ...

  9. 386. Lexicographical Numbers 输出1到n之间按lexico排列的数字序列

    ［抄题］: Given an integer n, return 1 - n in lexicographical order. For example, given 13, return: [1,1 ...

  10. 查看windows上次开机时间

    首先在电脑上找的[计算机]图标,点击鼠标右键弹出下拉菜单,在下拉菜单里找到[管理]选项 点击下拉菜单里的[管理]选项,弹出计算机管理界面,在左侧菜单栏里的系统工具里可以看到[事件查看器]菜单 点击[时 ...