类别三级联动

<!-- 类别三级联动 -->

<script type="text/javascript">
    var areaJson = {};
    $(function(){
        $.getJSON("${ctx}/category/getree",function(data){
            areaJson =data;
            setHtml(0,".category1");
        });
        $(".category1").change(function(){
            setHtml(this.value,".category2");
            setHtml("<option value=''>请选择</option>",".category3")
        });
        $(".category2").change(function(){
            setHtml(this.value,".category3")
        });
    });
    function setHtml(parentId,selectId){
        var temp_html = "<option value=''>请选择</option>";
        $.each(areaJson,function(i,category1){
            if(category1.pId==parentId){
                temp_html+="<option value='"+category1.id+"'>"+category1.name+"</option>";
            }
        });
        $(selectId).html(temp_html);
    }
</script>

			<tr >
				<th><label for="categoryId"><font color="red">*</font>所属分类：</label></th>
				<td>
					<div class="selectList">
				        <select class="category1" id="categoryIds[0]"  name="categoryIds[0]">
				            <option>请选择</option>
				        </select>
				        <select class="category2" name="categoryIds[1]">
				            <option>请选择</option>
				        </select>
				        <select class="category3" name="categoryIds[2]">
				            <option>请选择</option>
				        </select>
				    </div>
				</td>
			</tr>

[{"id":"12","pId":"0","name":"肥料","iconSkin":null,"open":false,"checked":false},
{"id":"24","pId":"12","name":"复(混)合肥","iconSkin":null,"open":false,"checked":false}]