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

最新推荐文章于 2022-08-26 16:18:50 发布

weixin_33840661

最新推荐文章于 2022-08-26 16:18:50 发布

阅读量239

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1468096/blog/338127

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

        });