效果展示

数据库设计

第一级数据库设计

第二级数据库设计

第三级数据库设计

都使用code来链接上一级！！！

前端

<select id="petType" name="petType" underline="true" style="width: 100%;height: 40px"><option value="-1">请选择</option>
</select>
<br>
<select id="petName" name="petName" underline="true" style="width: 100%;height: 40px"><option value="-1">请选择</option>
</select>
<br>
<input type="text" placeholder="价格" class="input" id="petPrice" name="petPrice">

ajax

$(function(){$.ajax({type:'post',url:"/pet",dataType:'json',contentType: "application/x-www-form-urlencoded; charset=UTF-8",async: false,cache: false,success: function (data) {$.each(data,function(index,item){$('#petType').append(new Option(item.TYPE,item.CODE));//往下拉菜单里添加元素})}})});$("#petType").change(function () {$("#petName").html("");var val = $("#petType option:selected").val();var data = val;$.ajax({type:"POST",url:"/petName",dataType: "json",data:data,contentType: "application/json",async: false,cache: false,success: function (data) {$('#petName').append(new Option("请选择","-1"));$.each(data,function(index,item){$('#petName').append(new Option(item.NAME,item.CODE));//往下拉菜单里添加元素})}})});$("#petName").change(function () {$("#petPrice").html("");var val = $("#petName option:selected").val();var data = val;$.ajax({type:"POST",url:"/petPrice",dataType: "json",data:data,contentType: "application/json",async: false,cache: false,success: function (data) {document.getElementById("petPrice").value=data;}})})

在Ajax这里遇到了一些问题，Ajax的亲求一直没有发送到后端，检查了半天发现是没有添加js的引用(大家一定要记住添加啊)

<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>

后端Mybatis

    <select id="selectpetName" resultType="java.util.Map">SELECT CODE,TYPE FROM tb_pettype    </select><select id="sleectpetNameByType" resultType="java.util.Map">SELECT CODE,NAME FROM tb_petname WHERE typecode=#{typecode}</select><select id="selectpetPriceByName" resultType="String">SELECT price FROM tb_petprice WHERE namecode=#{namecode}</select>

后端mapper层

    //用于查询宠物类别List<Map<String ,Object>> selectpetName();//用于三级联动查询宠物名称List<Map<String ,Object >> sleectpetNameByType(@Param("typecode") String typecode );//用于三级联动查询寄养价格String selectpetPriceByName(@Param("namecode") String namecode);

后端service层

    //用于查询宠物类别List<Map<String,Object >> selectpetName();//用于三级联动查询宠物名称List<Map<String ,Object >> sleectpetNameByType(@Param("typecode") String typecode );//用于三级联动查询寄养价格String selectpetPriceByName(@Param("namecode") String namecode);

后端ServiceImpl层

    //用于三级联动查询宠物类别@Overridepublic List<Map<String, Object>> selectpetName() {return petMappeer.selectpetName();}//用于三级联动查询宠物名称@Overridepublic List<Map<String, Object>> sleectpetNameByType(String typecode) {return petMappeer.sleectpetNameByType(typecode);}//用于三级联动查询寄养价格@Overridepublic String selectpetPriceByName(String namecode) {return petMappeer.selectpetPriceByName(namecode);}

后端controller层

    //用于三级联动查询宠物列别@RequestMapping("/pet")@ResponseBodypublic List<Map<String ,Object >> selectpetName(String id){return petService.selectpetName();}//用于三级联动查询宠物名称@RequestMapping("/petName")@ResponseBodypublic List<Map<String ,Object>> sleectpetNameByType(@RequestBody String typecode){int a=1;return petService.sleectpetNameByType(typecode);}//用于三级联动查询寄养价格@RequestMapping("/petPrice")@ResponseBodypublic String  selectpetPriceByName(@RequestBody String namecode){return petService.selectpetPriceByName(namecode);}

模仿大神的文章：https://blog.csdn.net/qq_41508632/article/details/89323396
中间遇到了很多坑，欢迎大家交流！！！

下拉框三级联动，数据库动态获取数据（springboot+ajax+html+mybatis）相关推荐

layui 下拉框三级联动
项目需要用layui的三级联动,自己瞎整了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT ...
Vue使用distpicker插件实现省市级下拉框三级联动
前言这几天做项目,想着用一个全国省市区插件,之前就知道有几种,比如通过JSON文件生成对应的区域下拉框,element-china-are插件,包括distpicker插件今天主要介绍的是如何使用 ...
php mysql实现下拉列表查询_php mysql如何实现通过下拉框查询显示数据库中的数据...
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
select下拉框二级联动
采用Layui框架两种方法实现,差别不大一.编写jsp代码二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
[LayUI]下拉框二级联动
下拉框二级联动在某些应用场景我们需要用到下拉选择框联动情形. HTML: <label class="layui-form-label">公司</label&g ...
WPS EXCEL制作二级下拉框、动态下拉框、联动下拉框
选择一个下拉框动态修改另一个下拉框的值,看一下效果图: step1
ajax下拉框省市级联动
目录效果 sql数据前后台代码实现效果初始访问页面选中省会,自动刷新页面 sql数据 -- 省市联动数据CREATE TABLE PROVINCE (PID NUMBER PRIMARY K ...
VUE下拉框双向联动
一.前言在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue ang ...

下拉框三级联动，数据库动态获取数据（springboot+ajax+html+mybatis）

效果展示

数据库设计

前端

ajax

后端Mybatis

后端mapper层

后端service层

后端ServiceImpl层

后端controller层

下拉框三级联动，数据库动态获取数据（springboot+ajax+html+mybatis）相关推荐

最新文章

热门文章