文档章节

AJAX异步请求二级联动加载下拉框

sunnyDay_1973
 sunnyDay_1973
发布于 07/27 15:25
字数 643
阅读 5
收藏 0

最近在开发中用到的二级联动加载下拉框,感觉比较有意思,记录一下。

  • 首先,二级联动下拉框的数据库建模是至少两张表以上的外键关联查询,首先准备数据库表格

        

  • 数据库表以及数据准备好过后,开始开发前端页面(前提是整个项目环境搭建好的情况下,此项目使用IDEA开发)

我们的需求是通过选择第一个下拉框的时候,第二个下拉框自动加载属于第一个下拉框的集合,

所以,这个时候怎么才能加载呢?无非是根据第一个下拉框的某个属性值去查询第二张表的属性集合

这个时候思路就出来了,首先页面加载的时候发送AJAX请求到后台查询第一个下拉框的值

前台代码:

$(function () {
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getTypes",
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=ptype]").append("<option value='"+result[i].tid+"'>"+result[i].tname+"</option>")
                    }
                }
            })
        })

后台代码:

此时第一个下拉框已经准备好了,到了最关键的一步,根据第一个选中的下拉框值去数据库查询匹配的数据集合(这里是绑定select标签onchange事件的方式)

  function getProducts() {
            var id=$("[name=ptype]").val();
            $("[name=pid]").empty();
            $("[name=pid]").append("<option >请选择</option>")
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getMappingProducts",
                data:{"id":id},
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=pid]").append("<option value='"+result[i].pid+"'>"+result[i].ptitle+"</option>")
                    }
                }
            })
        }

为什么我们能获取到第一个下拉框的id呢?

这里有一个巧妙的思想,在加载第一个下拉框的时候,在每个option标签中隐藏一个value属性(把id藏进去),那么通过标签.val函数就能获取到value属性值了

到这里其实已经完成了大部分工作,下面就是根据请求参数查询回显数据了

后台代码:

到这一步功能已经实现!

只要掌握了二级联动下拉框加载,三级四级同理也可以相似方式实现!

 

© 著作权归作者所有

sunnyDay_1973
粉丝 0
博文 1
码字总数 643
作品 0
万州
私信 提问
ajax 动态生成二级联动下拉列表

无限级二级菜单,越来越多的被应用,譬如省级->市级的二级菜单 思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,通过ajax请求获取到该值所对应的二级内容,然...

喜欢敲代码的感觉
2014/10/28
1K
0
360UI 界面框架 最完美的select下拉框美化

最完美的select下拉框美化 很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:360UI即QUI下拉框( ) 特点1:美化的并...

阿东2020
2013/05/06
1K
0
最完美的select下拉框美化

很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:360UI即QUI下拉框( ) 特点1:美化的并且可自定义的外观 QUI下拉框...

阿东2020
2013/05/06
1K
7
ajax返回的数据不能操作。

一个二级联动,用ajax来做。 比如是城市, 我选择北京,第二列会出现北京的区。 有一个人选他的住址,比如是北京,朝阳,入库。 我要回显回显。 先ajax获取第二列下拉框。 这时候如果用$("第...

刘三刀
2013/04/24
397
1
DWZ+PHP中如何实现下拉框的二级联动效果?

hi,各位好! 我在使用EaglePHP+DWZ进行二次开发的过程中,遇到了一个大问题(对于我这个php初学者来说):那就是如何实现下拉框的二级联动效果? 看过DWZ官方例子中的下拉框二级联动效果,也在...

OpenIoT
2013/03/11
2.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部