JQery 三级联动

三级联动的效果 

1.使用jqery的change事件

2.发送ajax获取对应的子集权限

当点击顶级分类时二级分类会出现对应的顶级分类的子集权限，点击二级分类时三级分类会出现对应二级分类的子集权限

给每个分类绑定id

<div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">分类</label>
        <div class="col-sm-10">
            <select name="type_id" id="typeone">
                {foreach $type as $v}
                <option value="{$v.id}">{$v.type_name}</option>
                {/foreach}
            </select>
        </div>
        <div class="col-sm-10">
            <select name="type_id" id="typetow">
                <option>二级分类</option>
            </select>
        </div>
        <div class="col-sm-10">
            <select name="type_id" id="typethree">
                <option>三级分类</option>
            </select>
        </div>
    </div>

给顶级分类绑定change事件

//根据一级分类获取二级分类
    //给一级分类帮点改变事件
    $('#typeone').change(function (){
        var pid = $(this).val();
        //发送ajxa
        $.ajax({
            url:'getType?id='+pid,
            success:function (e){
                // console.log(e);
                var str = '';
                //循环添加
                $.each(e.data,function(i,v){
                    str += '<option value="'+v.id+'">'+v.type_name+'</option>'
                });
                //二级分类追加
                $('#typetow').append(str);
            }
        })
    })

根据二级分类获取三级分类

//给二级分类绑定改变事件
    $('#typetow').change(function (){
        var pid = $(this).val();
        //发送ajax
        $.ajax({
            url:'getType?id='+pid,
            success:function (e){
                // console.log(e);
                var str = '';
                //循环添加
                $.each(e.data,function(i,v){
                    str += '<option value="'+v.id+'">'+v.type_name+'</option>'
                });
                //三级分类追加
                $('#typethree').append(str);
            }
        })
    })