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 ...
随机推荐
- StompJS使用文档总结
STOMP即Simple (or Streaming) Text Orientated Messaging Protocol,简单(流)文本定向消息协议,它提供了一个可互操作的连接格式,允许STOMP ...
- [原创]Delphi XE10 dxLayoutControl 控件应用指南
DevExpress VCL套件是一套非常强大的界面控件,可惜关于Delphi开发方面的说明太少,有些控件使用起来一头雾水,不知从何下手.本节详细介绍在Delphi Xe10 Seattle中如何利用 ...
- VS2017环境下安装AO10.2的方法
软件版本 Visual Studio的全称.简称及版本号对应关系为: Microsoft Visual Studio 2002 VS2002 VC7.0 Microsoft Visual Studio ...
- Oracle 之 树查询 START WITH ... CONNECT BY ...子句
START WITH ... CONNECT BY ...子句是结构化查询中用到的,其基本语法是: select … from tablename start with 条件1 connect by ...
- 3分钟搞明白信用评分卡模型&模型验证
信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二分类变量的广 ...
- Effective Java 第三版——76. 争取保持失败原子性
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- BizTalk RosettaNet 开发笔记
RNIF BAM Tracking Error  解决办法:  503: Service Unavailable   解决办法:IIS 应用程序池运行账户用户名或密码错误,用户名不能是doma ...
- nginx+lua的基本原理概念介绍
一. 概述 Nginx是一个高性能,支持高并发的,轻量级的web服务器.目前,Apache依然web服务器中的老大,但是在全球前1000大的web服务器中,Nginx的份额为22.4%.Nginx采用 ...
- linux技巧---为各应用创建快捷方式
linux中启动或关闭应用有时候比较麻烦,你必须cd到该应用的可执行脚本的目录中再执行该脚本,不能在任意目录下开启或关闭应用..当然,设置了环境变量path可以解决在任意目录下开启应用的问题,但是每个 ...
- ubuntu下core file文件生成及调试
1.简介:corefile 是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 2.corefile的设置 默认情况下,程序崩溃是不会生成coref ...