有时在项目中常常会用到三级联动,那么怎么php怎么制作三级联动呢?话不多说,直接上代码。
控制器方法
<?php
namespace app\index\controller;
use think\Controller;
use think\Model;
use think\Db;
class Threelevel extends Controller{
/*获取到数据并跳转至主页面,在主页面输出*/
public function index(){
//查询three_level表中class等于0的所有记录并赋值给data
$data = db('three_level')->where('class','0')->select();
//将$data赋值给data模板
$this->assign('data',$data);
//返回视图three_level/index
return view('index');
}
// 获取页面传递的等级和选中id
public function city($class,$id){
// 查询three_level表中class等于$claaa parent等于$id 的记录并赋值给$data
$data = db('three_level')->where(['class'=>"$class",'parent'=>"$id"])->select();
//返回$data
return $data;
}
/**
* 返回到视图threelevel/add_data
*/
public function add_data(){
return view('threelevel/add_data');
}
/**
*获取到ajax传递的参数,用于查表的条件,需要先将参数-1
*在three_level中查询数据
*返回数据
*/
public function garde(){
$val = request()->POST('cla')-1;
$data = db('three_level')->where('class',$val)->select();
return $data;
}
/**
*获取到表单传递的数据赋值data
*插入到three_level表中
*根据插入情况返回
*/
public function insert(){
if(request()->isPost()){
$data['text'] = input('text');
$data['class'] = input('class');
$data['parent'] = input('pertain');
$into = db('three_level')->insert($data);
if($into){
return $this->success('添加成功','index');
}else{
return $this->error('添加失败');
}
}
}
}
视图index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
}
select {
margin: 0;
padding: 0;
width: 150px;
}
</style>
</head>
<body>
<div>
<!-- 绑定change事件传递等级参数 -->
<select name="save" id="save" onchange="save(1)">
<option value="" selected hidden disabled>-请选择save-</option>
{volist name='data' id="val"}
<!-- 循环输出省级数据 -->
<option value="{$val['id']}">{$val['text']}</option>
{/volist}
</select>
<!-- 绑定change事件传递等级参数 -->
<select name="city" id="city" onchange="save(2)">
<option value="" selected hidden disabled>-请选择city-</option>
</select>
<select name="classify" id="classify">
<option value="" selected hidden disabled>-请选择classify-</option>
</select>
</div>
<br>
<a href="{:url('add_data')}">添加数据</a>
<br>
<a href="{:url('ueditor/index')}">ueditor富文本编辑器</a>
</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>
function save(cla) {
let value;
if (cla == 1) {
value = document.getElementById('save').value;
} else if (cla == 2) {
value = document.getElementById('city').value;
}
$.ajax({
type: "post",
url: "city",
data: {
class: cla,
id: value
},
success: function (res) {
console.log(res);
if (cla == 1) {
let str = `<option value="" selected hidden disabled>-请选择city-</option>`;
for (let i = 0; i < res.length; i++) {
str += `<option value="${res[i].id}">${res[i].text}</option>`;
}
document.getElementById('city').innerHTML = str;
document.getElementById('classify').innerHTML = `<option value="" selected hidden disabled>-请选择classify-</option>`;
} else if (cla == 2) {
let str = `<option value="" selected hidden disabled>-请选择classify-</option>`;
for (let i = 0; i < res.length; i++) {
str += `<option value="${res[i].id}">${res[i].text}</option>`;
}
document.getElementById('classify').innerHTML = str;
}
}
})
}
</script>
</html>
视图add_data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加数据</title>
</head>
<body>
<form action="{:url('threelevel/insert')}" method="post">
<label>名称:<input type="text" name="text" required placeholder="请输入地址"></label><br>
<label>等级:<select name="class" id="class" onchange="cla()" required>
<option value="" select hidden>-请选择-</option>
<option value="0">save</option>
<option value="1">city</option>
<option value="2">classify</option>
<select></label><br>
<label>归属:<select name="pertain" id="pertain" required>
<option value="">-请选择-</option>
</select></label><br>
<input type="submit" name="submit" id="submit" value="提交">
</form>
</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>
function cla(){
let val = document.getElementById('class').value;
$.ajax({
type:"post",
url:"garde",
data:{
cla:val
},
success:function(res){
console.log(res);
let str = `<option value="">-请选择-</option>`;
for(let i = 0;i < res.length;i++){
str += `<option value="${res[i].id}">${res[i].text}</option>`;
}
document.getElementById('pertain').innerHTML = str;
}
})
}
</script>
</html>
数据表设计