有时在项目中常常会用到三级联动，那么怎么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>
