思路:

1.定义路由
2.查询顶级分类(pid=0)发送至制图
3.循环展示
4.给顶级分类下拉框绑定内容改变事件(JS:onchange、JQ:change)
5.获取到选中的option的value值(本分类的主键id)
6.根据ID发送ajax请求
7.后端定义新方法
8.接收ajax请求的id值,就是要查询的pid的where
9.根据查询的结果返回给ajax(注意:ajax不能直接return 要以JSON格式返回)
10.由于是一个二维数组,需要使用循环进行拼接
11.将循环拼接后的字符串追加至下一个select中
12.注意追加前的option必须要清空

1:模型页面,获取一级分类的数据。

<?php

namespace app\common\model;

use think\Model;

class CateGroyModel extends Model
{
//
protected $table = 'pyg_category'; public static function getCate()
{
return self::select();
}

 2:控制器页面:先将数据表中的分类数据通过thinkphp函数this->assign()函数将数据展示在页面中,进行循环渲染

   public function create()
{
//
$result = CateGroyModel::getCate();
$this->assign('result', $result);
return view();
}
      <div class="formControls col-xs-8 col-sm-9">
<span class="select-box" style="width:150px;">
<select name="" class="select" id="cate_one">
<option value="">请选择一级分类</option>
{foreach $result as $v}
<option value="{$v.id}">{$v.cate_name}</option>
{/foreach}
</select>
</span>
<span class="select-box" style="width:150px;">
<select name="" class="select" id="cate_two">
<option value="">请选择二级分类</option>
</select>
</span>
<span class="select-box" style="width:150px;">
<select name="cate_id" class="select" id="cate_three">
<option value="">请选择三级分类</option>
</select>
</span>
</div>
</div>

3:获取一级分类的数据中的id,通过ajax发送至控制器cate方法

 $(function () {
$('.HuiTab').Huitab();
//给一级分类设置change事件
$('#cate_one').change(function () {
//获取一级分类的商品id
var id = $(this).val();//这里是主键id
$.ajax({
'url': "/pyg/admin/cate",
'type': 'get',
'data': {'id':id},
'dataType': 'json',
'success':function(res){
//将数据进行替换
console.log(res);
var str = '<option value="">请选择二级分类</option>';
$.each(res.data, function (i, v) {
str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
});
$('#cate_two').html(str);
}
});
});

模型代码:思路 ,让pid= 一级分类的id,这样就关联到二级分类的数据,再将数据通过json返回至页面,进行option拼接

//    二级分类
public static function getTwoCate($id)
{
return self::where('pid', $id)->select();
}

控制器代码:

//给二级分类设置change事件
$('#cate_two').change(function () {
//获取二级分类的商品id
var id = $(this).val();
$.ajax({
'url': "/pyg/admin/cate",
'type': 'get',
'data': {'id':id},
'dataType': 'json',
'success': function (response) {
var str = '<option value="">请选择三级分类</option>';
$.each(response.data, function (i, v) {
str += '<option value="' + v.id + '">' + v.cate_name + '</option>';
});
$('#cate_three').html(str);
}
});
});
//   多级分类
public function cate()
{
//接受参数父级pid=0的id;
$id = \request()->get('id');
$data = CateGroyModel::getTwoCate($id);
return json(['code' => 200, 'message' => '一级分类,二级分类,三级分类的pid=主键id', 'data' => $data]);
}

4:三级分类的思路与二级分类的思路相同,同样获取到二级分类id ,将三级分类pid=二级分类id,这样三级分类的数据也就关联上

  //给三级分类设置change事件
$('#cate_three').change(function () {
//获取三级分类商品的id
var id= $(this).val();
$.ajax({
'url': "/pyg/admin/cateTwo",
'type': 'get',
'data': {'id':id},
'dataType': 'json',
'success': function (response) {
var str = '<option value="">请选择商品品牌</option>';
$.each(response.data, function (i, v) {
str += '<option value="' + v.id + '">' + v.name + '</option>';
});
//进行替换
$('#brand').html(str);
}
});
});

tp 5 三级联动查询(自写)的更多相关文章

  1. Ajax案例:三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

  2. 三级联动查询全国省市区(xml与数据库)

    提供有china.xml和china.sql文件,实现全国省市区的三级联动效果 一.xml实现 import java.awt.EventQueue; import javax.swing.JFram ...

  3. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  4. Ado.Net实现简易(省、市、县)三级联动查询,还附加Access数据

    小弟在博客园驻园不久,初来咋到:将最近写的小程序附上,希望各位大牛们吐槽:激发对程序员围观的童鞋们,赶紧加入IT行业,如果你在上海那简称就是SHIT,哈哈题外话,以下开始切入正题: 坐公交车是旁边偶遇 ...

  5. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  6. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  7. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...

  8. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  9. 使用php ajax写省、市、区、三级联动

    题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用china ...

随机推荐

  1. HTML Flex 布局

    感谢原文作者:在路上de 小白 原文链接:https://www.cnblogs.com/likun123/p/9518466.html#commentform 目录 一.Flex 布局是什么? 二. ...

  2. bom-location

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ReactiveCocoa 学习资料

    之前就有听说,感觉很强大,ReactiveCocoa更加被Mattt Thompson大神称为开启一个新Objective-C纪元.所以觉得非常有学习的必要了. 一些很好的学习资料: Reactive ...

  4. 获取缓存文件大小并清理 By HL

    通常用于删除缓存的时,计算缓存大小 //单个文件的大小 - (long long) fileSizeAtPath:(NSString*) filePath{ NSFileManager* manage ...

  5. ELK 日志分析系统概述及部署

    ELK 日志分析系统概述及部署 1.ELK概述: ELK简介 : ELK平台是一套完整的日志集中处理解决方案,将 ElasticSearch.Logstash 和 Kiabana 三个开源工具配合使用 ...

  6. 纯JS脚本发送HTTP请求

    1 var xmlHttp; 2 var iii = 0; 3 if (window.XMLHttpRequest) { 4 xmlHttp = new XMLHttpRequest(); 5 if ...

  7. Azure AD Domain Service(二)为域服务中的机器配置 Azure File Share 磁盘共享

    一,引言 Azure File Share 是支持两种认证方式的! 1)Active Directory 2)Storage account key 记得上次分析的 "Azure File ...

  8. Ubuntu20.04 PostgreSQL 14 安装配置记录

    PostgreSQL 名称来源 It was originally named POSTGRES, referring to its origins as a successor to the Ing ...

  9. 第8章 File I/O,File类操作文件的属性

    1.文件 1.1.什么是文件? 答:文件可认为是相关记录或放在一起的数据的集合 1.2.文件- -般存储在哪里? 答: 磁盘,硬盘,文件夹 1.3.JAVA程序如何访向文件属性? JAVA API:i ...

  10. Python数据分析 | Numpy与1维数组操作

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/33 本文地址:http://www.showmeai.tech/article-det ...