思路:

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. getter/setter方法

    1.setter方法 作用:用来设置成员变量,可以在方法里面过滤掉一些不合理的值 命名规范: 必须是对象方法 返回值类型为void 方法名必须以set开头,而且后面跟上成员变量名去掉"_&q ...

  2. KVC替换系统的tabbar为自定义tabbar---秀清

    CustomTabbar *tabbar = [[CustomTabbar alloc]init]; //KVC,更换系统的tabbar为自定义tabbar tabbar.tabbarDelegate ...

  3. 关于tx:method和pointcut中的方法,即事务管理中的方法和切入点表达式中的方法具体如何执行

    <tx:advice id="transaction" tranction-manager="transactionManager"> <tx ...

  4. Windows服务调用Office时,未将对象引用的实例

    Windows键+R键                         回车 输入:comexp.msc -32               回车 点击控制台根节点--组件服务--计算机--我的电脑- ...

  5. 2021羊城杯比赛复现(Crypto)

    bigrsa 题目: from Crypto.Util.number import * from flag import * n1 = 10383529640908175186077053551474 ...

  6. Java中Arrays数组工具类的使用全解

    本文几乎涵盖了所有的Arrays工具类(基于Java 11)的方法以及使用用例,一站式带你了解Arrays类的用法,希望对大家有帮助. 码字不易,三连支持一下吧 Arrays数组工具类 方法一览表 快 ...

  7. F WebDriver and 环境配置

    https://seleniumhq.github.io/docs/wd.html WEBDRIVER The biggest change in Selenium recently has been ...

  8. 根据经纬度坐标获得省市区县行政区划城市名称,自建数据库 java python php c# .net 均适用

    目录 步骤一.下载省市区边界数据 步骤二.解析CSV文件导入数据库 步骤三.在程序中根据坐标解析获得城市 在LBS应用中,根据坐标来解析获得对应是哪个城市是一个很常见的功能,比如App里面通过手机定位 ...

  9. world.construct(me);

    目录 0 引言 0.1 所谓构造题 0.2 重点是动机 (motivation) 1 实践出真知 1.1 「CSP-S 2021」「洛谷 P7915」回文 1.1.1 题目大意 1.1.2 解题过程 ...

  10. ASP.NET Core 6框架揭秘实例演示[05]:依赖注入基本编程模式

    毫不夸张地说,整个ASP.NET Core就是建立在依赖注入框架之上的.ASP.NET Core应用在启动时构建管道所需的服务,以及管道处理请求使用到的服务,均来源于依赖注入容器.依赖注入容器不仅为A ...