如何實現selectselect二級聯動效果

<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>"));
 }

 }
 });
}