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

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

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

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

你可能感兴趣的:(jquery,post,二级联动下拉列表)