php登录之后才用的三级页面,php如何在页面中制作三级联动的选项卡

我们在网页中经常会见到多重的选项卡，当一个选项内容发送改变时，另外的选项卡内容也相应改变，例如在某个地址查询的选项中，当你选择“山东省”的时候，那么“市”，“区”的选项也会相应发生变化，本篇将说明如何制作这样的选项卡。

以地址选项卡为例，数据库方面，我们需要一张表，表中包含的字段为id，name(地址名称)，parent_id(父级地址的id)，主要思路为：根据id来选择打印至html页面的select选项卡中的option的值，而当option的值发送变化时，同时改变其他option的值，他们之间的对应关系则根据父级id来实现同步(即：parent_id)。

获取数据的方法跟之前文章中方法相同，php提出数据转成字符串返回到ajax，再用一个function把字符串转成数组。

我们需要两个页面，一个负责显示的HTML页面和一个后台处理的php页面index.php

HTML页面(包含js)：

无标题文档

//引用jquery

//通过ajax获取数据

var tabData="";

$.ajax({

async:false,

url:‘index.php‘,

data:{},

type:‘get‘,

dataType:‘text‘,

success:function(data){

//调用方法：字符串转数组 同时传值data

tabData=data;

}

});

var brr = [];

window.onload = function(){

var sheng = document.getElementById("sheng");

var shi = document.getElementById("shi");

var qu = document.getElementById("qu");

/*把字符串转成数组*/

var arr = tabData.split(‘^‘);

for(var i in arr){

brr.push(arr[i].split(‘,‘));

}

//先调用一遍方法，此时省内选项为“请选择”

changehtml(0,sheng);

//当省改变时调用方法

sheng.onchange = function(){

changehtml(this.value,shi);

}

//当市改变时调用方法

shi.onchange = function(){

changehtml(this.value,qu);

}

}

//方法：   此处应用传参，code是父级id，即parent_id，obj是所对应选项卡的id，即：“sheng”，“shi”，“qu”

function changehtml(code,obj,){

var str = ‘请选择‘;

for(var i = 0; i

if(brr[i][2] == code){

str += ""+brr[i][1]+"";

}

}

obj.innerHTML = str;

}

省：

市：

区：

php页面：

/*连接数据库*/

$db= new MySQLi(‘localhost‘,‘root‘,‘root‘,‘database‘);

!mysqli_connect_error() or die(‘连接失败‘);

$db->query(‘set names utf8‘);

//提取全部数据生成数组

$sql = "select * from table ";

$res = $db->query($sql);

$arr = array();

//取需要的关键字段生成关系数组

while($row = $res->fetch_assoc()){

$arr[] = array($row[‘id‘],$row[‘name‘],$row[‘parent_id‘]);

}

//转成字符串

$str = ‘‘;

foreach($arr as $v){

//用一个^把数据隔开

$str .= implode($v,‘,‘)."^";

}

/*删除最后一个向上箭头^*/

$str = substr($str,0,strlen($str)-1);

//输出

echo $str;

?>

原文：https://www.cnblogs.com/xwenbin/p/10224400.html