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 ...
随机推荐
- Guava Preconditions 工具参数前置校验
guava 提供 Preconditions 作为代码校验的工具类,用来简化开发中对代码的校验或预处理,在逻辑开始前进行合理性校验,避免参数传入过深导致的数据错误. 并且能够在不符合校验条件的地方, ...
- Linux 驱动开发
linux驱动开发总结(一) 基础性总结 1, linux驱动一般分为3大类: * 字符设备 * 块设备 * 网络设备 2, 开发环境构建: * 交叉工具链构建 * NFS和tftp服务器安装 3, ...
- linux上ssh免密登录原理及实现
因为我的服务器集群需要回收日志到中央进行统一处理,所以需要建立ssh互信关系实现免密登录.关于ssh的使用大家可能都很熟悉了,我们今天主要来讲下ssh连接和免密登录的原理. scp 传输文件 scp( ...
- Gitee vs插件（Gitee Extension for Visual Studio）
Gitee 码云(gitee.com)是开源中国推出的代码托管平台,支持 Git 和 SVN,提供免费的私有仓库托管. https://gitee.com/GitGroup/Gitee.VisualS ...
- 关于VMware Linux 虚拟机忘记root 密码找回
因为昨天新安装过虚拟机设置了新的密码,再加上我好长时间没有用自己旧的虚拟机,导致忘记了密码,原来虽然知道在单用模式下,找回密码,但是确实是自己从来都没有做过,还好我们组大手飞翔哥告诉了我,怎么找回ro ...
- LiveSwitch白皮书
https://www.frozenmountain.com/media/1224/frozen-mountain-software-liveswitch-white-paper.pdf —————— ...
- linux系统下键盘按键的重新映射——xmodmap工具和xev工具
大家会不会有时候,感觉键盘上的某几个键用起来不是很方便,打字打久了很容易手指头疼呢? 例如大家使用vim编辑器时, 经常需要使用到esc键,而该键在左上角,很不方便的.再比如写程序的时候,经常会使用到 ...
- 使用winsw部署spring boot jar 项目
参考:用winsw让任何Windows程序都能运行为服务 简介在linux下部署springboot项目是一件很简单的事,直接后台运行就行了,最多写个shell脚本开机自启就行了.我们最近做的项目需要 ...
- [转]谈NAND Flash的底层结构和解析
这里我想以一个纯玩家的角度来谈谈关于NAND Flash的底层结构和解析,可能会有错误的地方,如果有这方面专家强烈欢迎指正. NAND Flash作为一种比较实用的固态硬盘存储介质,有自己的一些物理特 ...
- 根据xlsx模板生成excel数据文件发送邮件代码
package mail; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...