select select二级联动效果

1. <li style="margin-right:-5px">一级类目：

2. <select id="mainCategoryId" name="mainCategoryId" class="length_2" οnchange="changeCate()">

3. <option value="">---请选择---</option>

4. #foreach($cell in $categories)

5. <option value="$!{cell.id}" #if($!cell.id == $!query.mainCategoryId) selected #end >$!{cell.name}</option>

6. #end

7. </select>

8. </li>

9. <li style="margin-right:-5px">二级类目：

10. <select class="categoryId" name="categoryId" class="length_2">

11. <option value="">---请选择---</option>

12. </select>

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

        }
    });
}