博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax 动态生成二级联动下拉列表
阅读量:6243 次
发布时间:2019-06-22

本文共 956 字,大约阅读时间需要 3 分钟。

hot3.png

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

思路:一级下拉列表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"));
                    });
                }
            });
            
        });

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

转载于:https://my.oschina.net/u/1468096/blog/338127

你可能感兴趣的文章
Chromium Graphics: Graphics and Skia
查看>>
asp.net core mvc上传大文件解决方案
查看>>
二叉树
查看>>
十分简单的抛物线运动
查看>>
乘法逆元(转)
查看>>
android repo库的创建及代码管理
查看>>
tomcat 配置
查看>>
Cloudera Certified Associate Administrator案例之Configure篇
查看>>
QTP完全卸载
查看>>
【跨域】#001 JSONP原理解析【总结】
查看>>
Linux下mysql的安装和配置
查看>>
Scrum 项目 4.0-5.0-约教网站开发(一)
查看>>
CSS3变形transform 2D初级了解
查看>>
uva 11806 Cheerleaders (容斥)
查看>>
[HAOI2012]音量调节
查看>>
week07 codelab02 C72
查看>>
ubuntu系统备份与还原
查看>>
人无股权不富
查看>>
JavaScript屏蔽Backspace键
查看>>
dom4j的安装
查看>>