设计模式：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. springcloud-知识点总结（三）：Hystrix & Dashboard & turbine & Zuul & SpringCloud Config

    1.Hystrix断路器简介 Hystrix断路器简介 hystrix对应的中文名字是“豪猪”,豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因 ...

  2. NLTK 统计词频

    import nltk Freq_dist_nltk = nltk.FreqDist(list) for k,y in Freq_dist_nltk: print str(k),str(y)

  3. Python基础-python数据类型之列表（四）

    列表 格式 namesList = [ 字符串,数字,列表,元祖,集合] 列表中的元素可以是不 同类型的 列表的相关操作 列表中存放的数据是可以进行修改的,比如"增"." ...

  4. init.d目录下的文件定义

    init.d目录下存放的一些脚本一般是linux系统设定的一些服务的启动脚本. 系统在安装时装了好多服务,这里面就有很多对应的脚本. 执行这些脚本可以用来启动,停止,重启这些服务. 1.这些链接文件前 ...

  5. 微擎开发------day04

    (1) cache_write($key,$data)  按照指定键名缓存数据 cache_write('test', $data) (2) cache_load($key)  读取指定键名的缓存数据 ...

  6. Mybatis配置问题解决Invalid bound statement (not found)

    首先这个异常的原因是系统根据Mapper类的方法名找不到对应的映射文件. 网上也搜索了到了类似的文章,一般可以从以下几个点排查: mapper.xml的namespace要写所映射接口的全称类名,而且 ...

  7. Agile PLM 开发中AgileAPI类型对应控制台分类说明

    1)    分类中的一级大类PLM后台管理的控制台中,每个分类中的一级大类都对应AgileAPI中一个类型 IServiceRequest对应产品服务请求,表为:psrIPrice对应价格,表为:pr ...

  8. input 随笔

    1,input 点击出现蓝色外边框 解决:outline:none

  9. 简述Python入门小知识

    如今的Python开发工程师很受企业和朋友们的青睐,现在学习Python开发的小伙伴也很多,本篇文章就和大家探讨一下Python入门小知识都有哪些. 扣丁学堂简述Python入门小知识Python培训 ...

  10. ABP框架系列之一：(Entity-实体)

    Entities are one of the core concepts of DDD (Domain Driven Design). Eric Evans describe it as " ...