设计模式：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. FM-分解机模型详解

    https://blog.csdn.net/zynash2/article/details/80029969 FM论文地址:https://www.csie.ntu.edu.tw/~b97053/pa ...

  2. tensorflow中的gfile模块（转）

    简介 这些函数和python中的os模块非常的相似,一般都可以用os模块代替吧 gfile API介绍 下面将分别介绍每一个gfile API! 2-1)tf.gfile.Copy(oldpath, ...

  3. linux下redis4.0.2集群部署（利用原生命令）

    一.部署架构如下 每台服务器准备2个节点,一主一从,主节点为另外两台其中一台的主,从节点为另外两台其中一台的从. 二.准备6个节点配置文件 在172.28.18.75上操作 cd /etc/redis ...

  4. Spring注解方式配置Redis

    @Configuration public class RedisConfiguraion { @Bean public JedisConnectionFactory redisConnectionF ...

  5. JSON转Excel

    1.引入js (dist目录下JsonExportExcel.min.js) <script src="https://cuikangjie.github.io/JsonExportE ...

  6. PHP安装linux

    PHP 7.1.26 安装 1. 下载安装包 例php-7.1.26.tar.gz 下载地址:http://cn2.php.net/downloads.php 2. 放入/root 3. 切换目录 # ...

  7. Percentage&Last zero&Convert from char to float

    Percentage g_rate = wg_header-rate. condense g_rate. SHIFT g_rate RIGHT DELETING TRAILING '0'. REPLA ...

  8. [leetcode]339. Nested List Weight Sum嵌套列表加权和

    Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...

  9. linux下反弹shell

    01 前言 CTF中一些命令执行的题目需要反弹shell,于是solo一波. 02 环境 win10      192.168.43.151       监听端    装有nc kali        ...

  10. day30

    作业 #__author : 'liuyang' #date : 2019/4/11 0011 下午 12:36 # 这两天 1.软件开发规范 不写 没法做新作业 #2. 认证+上传 +下载 + 校验 ...