设计模式：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. 2、python的变量

    1.什么是变量 变量>顾名思义变化的量,量是一种表示一种状态的方式,而且可以变 2.为什么要用变量 程序的执行是一直处于一种变化状态的,我们可以用变量表示表示程序进行中的状态,并将它记录下来 3 ...

  2. Codeforces Round #439 C. The Intriguing Obsession

    题意:给你三种不同颜色的点,每种若干(小于5000),在这些点中连线,要求同色的点的最短路大于等于3或者不连通,求有多少种连法. Examples Input 1 1 1 Output 8 Input ...

  3. Spring注入静态变量的方法，以及CXF如何获取客户端IP

    1.如果使用@Resource注解来注入静态变量的,服务器启动就会报错的.可以新增一个set方法,同时在set方法上用@Resource注解来注入. 2.或者直接在Spring的配置文件中使用< ...

  4. java 遇到的问题

    1.list.sort(new Comparator<String>() { @override public int compare(String o1, String o2) { re ...

  5. RIDE 接口自动化请求体参数中文时报错：“UnicodeDecodeError: 'ascii' codec can't decode byte 0xd7 in position 9......”

    在进行robotframework  接口自动化,在请求体参数中输入中文会报以下错误: UnicodeDecodeError: 'ascii' codec can't decode byte 0xd7 ...

  6. 受欢迎的牛[HAOI2006]

    --BZOJ1051 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 ​ 种关系是具有传递性的,如果A认为B受欢迎, ...

  7. 20170805_linux

    http://blog.csdn.net/aaaaatiger/archive/2007/07/28/1713611.aspx Delphi/Pascal code   ? 1 2 3 4 5 6 7 ...

  8. 利用iptables防止ssh暴力破解和控制网速

    iptables -I INPUT -p tcp --dport 22 -i eth0 -m state --state NEW -m recent --setiptables -I INPUT -p ...

  9. @RemoteProxy（）注释 与@File注释的使用

    @RemoteProxy()注释 dwr3.0可以通过全注解的方式,极大的简化了配置,所有xml配置加在一起不超过20行,而且使用更加简单,bean注入的问题也都解决.配置步骤如下: web.xml的 ...

  10. python之全局变量和局部变量

    一.定义 1.全局变量 定义在函数外部一级代码的变量,叫全局变量,全局能用. 2.局部变量 定义在函数内的变量,只能在局部生效 二.用法 1.在函数内部可以引用全局变量,如果全局和局部都有一个变量na ...