文档章节

ajax 动态生成二级联动下拉列表

喜欢敲代码的感觉
 喜欢敲代码的感觉
发布于 2014/10/28 14:18
字数 246
阅读 1629
收藏 2

无限级二级菜单,越来越多的被应用,譬如省级->市级的二级菜单

思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,通过ajax请求获取到该值所对应的二级内容,然后jquery修改二级下拉列表的内容,即可实现动态生成二级联动下拉列表

示例:

下拉列表

                <td width="40%">一级分类
                    <select id="head_one">
                        <option value="-1">全部</option>
                        <volist name="ones" id="val">
                        <option value="{$val.id}">{$val.cname}</option>
                        </volist>
                    </select>
                </td>
                <td width="40%">二级分类
                    <select id="head_two">
                        <option value="-1">全部</option>
                    </select>
                </td>

jqury post获取

        $("#head_one").change(function(){
            var parentId = $("#head_one").val();
            if(parentId == -1)
                return false;
            $.ajax({
                url : '{:U("Info/checkTwoCategory")}',
                type : 'POST',
                data : {
                    'parentId' : parentId,
                },
                dataType : 'json',
                error:function()
                {
                    alert('Error loading data!');
                },
                success:function(msg)
                {
                    $("#head_two").empty();  
                    $.each(eval(msg), function(i, item) {  
                        $("<option value='" + item.id + "'>" + item.cname + "</option>").appendTo($("#head_two"));
                    });
                }
            });
            
        });

即可实现二级联动下拉列表

© 著作权归作者所有

喜欢敲代码的感觉
粉丝 1
博文 41
码字总数 8149
作品 0
西安
程序员
私信 提问
基于jQuery+JSON的省市区三级地区联动

查看演示:http://www.helloweba.com/demo/cityselect/ 源码下载:http://files.cnblogs.com/files/huangcong/cityselect.rar 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系...

老朱教授
2017/10/01
0
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
Axure RP 如何实现下拉框二级联动效果

一、拖一个下拉列表框作为一级 二、拖一个动态面板放二级内容 三、双击动态面板,设置二级内容: 四、双击广东,拖一个下拉列表框作为广东省下的二级下拉框 五、双击二级下拉框,添加广东省下...

一个yuanbeth
2018/11/10
714
0
JS实现下拉列表的二级联动

这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的...

Reborn-D
2016/01/06
148
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部