<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../jquery-3.2.1.min.js"></script>
</head>

<body>
省: <select name="" id="sheng">
<option value="">请选择</option>
</select>
市: <select name="" id="shi">
<option value="">请选择</option>
</select>
区: <select name="" id="qu">
<option value="">请选择</option>
</select>
</body>
</html>
<script>
$(function(){
//获取省的信息
ajaxFun(0,"sheng");
})
function ajaxFun(id,type){
$.ajax({
url:"sjld.php",//服务器的地址
data:{id:id},//发送的数据
success:function(data){//执行成功的回调
strToArr(data,type);//调用函数

}

});

}

function strToArr(str,type){//字符串转数组
var arr = str.split('^'),//第一维
brr = [];//定义第二维数组
for(var i=0;i<arr.length;i++){//循环遍历第一维的数组
var temp =arr[i].split(',');//第二维
brr.push(temp);//将第一维的数组放入第二维

}
addHTML(brr,type);//网页追加
}
function addHTML(brr,type){//网页追加
var str ='<option value="">请选择<?option>';
for(var i in brr){
str+='<option value="'+brr[i][0]+'">'+brr[i][1]+'</option>';
}
$('#'+type).html(str);
}
$('#sheng').change(function(){//省的下拉 值改变的时候添加事件
var id=$(this).val();//获取选择的省的id
ajaxFun(id,"shi");//ajax再获取市

})
$('#shi').change(function(){//市的下拉 值改变的时候添加事件
var id=$(this).val();//获取选择的市的id
ajaxFun(id,"qu");//ajax再获取区

})

</script>

<?php
//连接数据库
$db =new MySQLi('localhost','root','','z_0705');//登录的数据库
!mysqli_connect_error()or die("连接失败");//如果连接错误
$db->query("set names utf8");//字符集是utf8
//接受数据
$id=0;
if(!empty($_GET)){//如果得到的数不是空
$id = $_GET['id'];//获取省的id
}
//查表父id=0
$sql = "select id,area_name from dt_area where area_parent_id=$id";
$res=$db->query($sql);//执行sql语句，返回结果集
$arr=$res->fetch_all();//把结果集转成数组

//返回数据 字符串
arrTostr($arr);
function arrTostr($a){//$a是结果集返回的是二维数组
$brr = array();//定义一个数组用来存数组转字符串
foreach($a as $v){//遍历数组里面的数
$temp = implode(",",$v);//遍历数组里面的数
$brr[] = $temp;//转成一维数组
}
echo implode("^",$brr);//转成字符串
}

php三级联动（html，php两个页面）的更多相关文章

  1. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  2. 注册页面的验证 WEB的三级联动

    1.js中window.onload = function () {};表示当页面都加载完了之后才走里面的内容. 2.当函数中遇到return时,会跳出函数,return后面的内容不再继续进行,就是后 ...

  3. ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. easyUI下拉列表三级联动

    首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...

  5. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  6. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  7. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  8. AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  9. Ajax案例：三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

  10. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

随机推荐

  1. SQLAlchemy——获取某列为空的数据

    session.query(StockAllInfo).filter( StockAllInfo.ts_code == tsCode and StockAllInfo.py_code==None).a ...

  2. FileClassify文件日期分类工具

    FileClassify是一款免费的文件按日期分类工具,能够根据文件修改日期,将文件移动或复制到对应的目录中 如果对您有较大的帮助,欢迎捐赠我们,我们对您表示衷心的感谢! 1.输入文件夹和输出文件可以 ...

  3. php5.6.11编译安装报错configure: error: Don't know how to define struct flock on this system

    centos 6.8 32位系统下,安装php.5.6.11是出现这个错误 解决办法: 1 2 3 4 vim /etc/ld.so.conf.d/local.conf     # 编辑库文件 /us ...

  4. mysql5.6 sql_mode设置为宽松模式

    最近遇到一个很奇怪的事情 由于数据人员的需求,现在需要修改mysql的sql_mode sql_mode默认是sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_ ...

  5. xcode10 改动

    xcode10 开发环境 比  之前有了稍微的变动 1. 代码块 界面控件   图片资源等 的查看位置发生了变化 之前的开发环境  代码块  统一放在 右侧栏的下方的几个选项中 现在 统一放到了上方 ...

  6. 【转载】SpringCloud-Eurek 心跳阈值说明

    在使用eureka过程中,查看监控界面,出现: EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE ...

  7. Xilinx的ISE14.7和PlanAhead与win10系统的兼容性问题解决方案

    Xilinx的ISE14.7和PlanAhead与win10系统的兼容性问题解决方案 2018年07月03日 18:27:57 feq123 阅读数:4495   今天在新电脑的win10系统上安装I ...

  8. Navicat（数据库可视化操作软件）安装、配置、测试

    Navicat(数据库可视化操作软件)安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.Navicat安装.激活与配置 4.简单测试 5.注意事项 6.相关博文 > ...

  9. C#学习笔记（36）——事件传值（非常牛逼！）

    说明(2018-4-9 23:01:20): 1. 这个真的想了很久,从晚上八点半写完上一篇博客,一直想到现在11点,以为没有办法实现了,结果看到一篇CSDN的文章,虽然没有看明白,但是看到一行代码后 ...

  10. ionic入门教程-ionic路由详解（state、route、resolve）(转)

    http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0 今天好好的跟大家讲讲ionic的路由配置. 问到的朋友有点多, ...