设计模式：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. Shapley值的一个应用

    看书有这样一个问题,某互联网公司今天需要加班,需要编写一个500行的程序代码,产品经理找了三个程序员来完成.按照完成量发奖金:1号普通程序员独立能写100行,2号大神程序员独立能写125行,3号美女程 ...

  2. Ambari2.7.3 和HDP3.1.0搭建Hadoop集群

    一.环境及软件准备 1.集群规划   hdp01/10.1.1.11 hdp02/10.1.1.12 hdp03/10.1.1.13 hdp04/10.1.1.14 hdp05/10.1.1.15 a ...

  3. 【实习】从ubuntu迁移过来的代码，在centos上编译问题的解决汇总

    目前自己的开发环境(同将来线上环境)是centos 7.我这里主要实现服务端.需要组里其他同学提供一个接口(视频编辑).公司内部自己开发环境 通常是台式ubuntu16.04.所以提供视频处理接口是在 ...

  4. Job for ssh.service failed because the control process exited with error code.......

    转载自:https://blog.csdn.net/woailyoo0000/article/details/79782986 笔者最近更新ubuntu系统,在更新之前设置了证书信任文件,重启以后ss ...

  5. 深入理解JVM(三)垃圾收集器和内存分配策略

    3.1 关于垃圾收集和内存分配 垃圾收集和内存分配主要针对的区域是Java虚拟机中的堆和方法区: 3.2 如何判断对象是否“存活”(存活判定算法) 垃圾收集器在回收对象前判断其是否“存活”的两个算法: ...

  6. java多线程系列14 设计模式 Master-Worker

    Master-Worker模式是常用的并行设计模式,可以将大任务划分为小任务,是一种分而治之的设计理念. 系统由两个角色组成,Master和Worker,Master负责接收和分配任务,Worker负 ...

  7. javaScript　字符串

    var name = '小明'; var age = 20; var message = '你好, ' + name + ', 你今年' + age + '岁了!'; alert(message) 要 ...

  8. Rsync常见错误和问题

    五.常见问题 以下是为配置rsync时的常见问题: 问题一:@ERROR: chroot failedrsync error: error starting client-server protoco ...

  9. O365 Manager Plus帮助台委派介绍

    O365 Manager Plus帮助台委派介绍 虽然Office 365允许您在全球任何地方工作,但它提供的管理功能十分不足.当一个组织分布在多个国家/地区时,一个管理员很难单独管理所有用户和邮箱. ...

  10. python抢火车票 短信通知

    # -*- coding: utf-8 -*- from splinter.browser import Browser from time import sleep import traceback ...