select select二级联动效果

<li style="margin-right:-5px">一级类目：                    <select id="mainCategoryId" name="mainCategoryId" class="length_2" onchange="changeCate()">                        <option value="">---请选择---</option>                        #foreach($cell in $categories)                            <option value="$!{cell.id}"  #if($!cell.id ==  $!query.mainCategoryId) selected #end >$!{cell.name}</option>                        #end                    </select>                </li>                <li style="margin-right:-5px">二级类目：                    <select class="categoryId" name="categoryId" class="length_2">                        <option value="">---请选择---</option>                    </select>                </li>

function changeCate(){    var  mainCategoryId = $("#mainCategoryId").find("option:selected").val();    if(mainCategoryId == "") {        $(".categoryId").empty().append("<option value=''>---请选择---</option>");        return false;    }    $.ajax({        url:'/tvtao/video/item/category.htm',        type:"post",        dataType:"json",        data: {'_tb_token_' : $("input[name='_tb_token_']").val(), parantId : mainCategoryId},        success: function (data) {            console.log(data);            $(".categoryId").empty().append("<option value=''>---请选择---</option>");            for(var i = 0, len = data.length; i < len; i++)            {                alert(data[i].id);                $(".categoryId").append($("<option value='" + data[i].id + "'>" + data[i].name + "</option>"));            }        }    });}