php三级联动（html，php两个页面）
<!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两个页面）的更多相关文章
- php+ajax的三级联动下拉菜单
封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...
- 注册页面的验证 WEB的三级联动
1.js中window.onload = function () {};表示当页面都加载完了之后才走里面的内容. 2.当函数中遇到return时,会跳出函数,return后面的内容不再继续进行,就是后 ...
- ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）
数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- easyUI下拉列表三级联动
首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...
- 全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
- wex5 实战 省市县三级联动与地址薄同步
无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2: 地址薄选项,利用inputSel ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- Ajax案例：三级联动查询员工的信息(三张表进行内连接)
需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
随机推荐
- 让Linux系统开机速度更快的方法
进行 Linux 内核与固件开发的时候,往往需要多次的重启,会浪费大把的时间. 在所有我拥有或使用过的电脑中,启动最快的那台是 20 世纪 80 年代的电脑.在你把手从电源键移到键盘上的时候,BASI ...
- numpy.trace对于三维以上array的解析
numpy.trace是求shape的对角线上的元素的和,具体看 https://docs.scipy.org/doc/numpy-1.13.0/reference/generated/numpy.t ...
- Glide终于解决了同时绑定多个webp格式图片的问题
前端时间,要给项目换个图片加载的库,使用Glide 3.7版本进行测试, 发现在快速滑动列表(每个item都会加载一个app的图标,采用webp格式,即同时加载多个webp格式)的时候,一屏至少有2- ...
- SSE图像算法优化系列二十九：基础的拉普拉斯金字塔融合用于改善图像增强中易出现的过增强问题（一）
拉普拉斯金字塔融合是多图融合相关算法里最简单和最容易实现的一种,我们在看网络上大部分的文章都是在拿那个苹果和橙子融合在一起,变成一个果橙的效果作为例子说明.在这方面确实融合的比较好.但是本文我们主要讲 ...
- AS使用lombok注解报错：Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.
Rebuild时报错信息如下所示: Error:Execution failed for task ':app:javaPreCompileDebug'.> Annotation process ...
- python接口自动化测试(八)-unittest-生成测试报告
用例的管理问题解决了后,接下来要考虑的就是报告我问题了,这里生成测试报告主要用到 HTMLTestRunner.py 这个模块,下面简单介绍一下如何使用: 一.下载HTMLTestRunner下载: ...
- 数据库的范式，第一、二、三、四、五范式、BC范式
数据库的规范化(上一篇博客有写到)的程度不同,便有了这么多种范式.数据库范式是数据库设计必不可少的知识,没有对范式的理解,就无法设计出高效率.优雅的数据库,甚至设计出错误误的数据库.课本中的定义比较抽 ...
- 每天一个linux命令(12):more命令
1.命令简介 more (more) 该命令一次显示一屏文本,满屏后停下来,并且在屏幕的底部出现一个提示信息,给出至今己显示的该文件的百分比,方便逐页阅读(file perusal filter fo ...
- java 根据身份证号码获取出生日期、性别、年龄
1.情景展示 如何根据身份证号,计算出出生日期.性别.年龄? 2.解决方案 从网上找的别人的,因为并没有实际用到,所以并未对其优化! /** * 通过身份证号码获取出生日期.性别.年龄 * @pa ...
- JavaWeb开发环境配置
JavaWeb开发环境配置(win7_64bit) 目录 1.概述 2.JavaWeb学习路线 3.JavaWeb常用开发环境搭建 4.注意事项 >>看不清的图片可在新标签打开查看大图 1 ...