jquery 实现层级下拉框联动效果 代码

<select name="fCareId" id="fCareId">
      <option selected="selected" value="0">选择一级分类</option>
    </select>
    <select name="fCareItemId" id="fCareItemId">
      <option selected="selected" value="0">选择二级分类</option>
    </select>

Jquery代码:

<script type="text/javascript">
$("#fCareId").change(function(){
        var byType = $("#byType").val(); 
        var fCareId = $("#fCareId").val(); 
        var dataString = {"byType":byType,"fCareId":fCareId};
        var encoded = $.toJSON( dataString ); 

        $.ajax({
            type: "POST",
            url: "../../careBasicAll",
            data: encoded,
            dateType:"json",
            success: function(data) {
                $("#fCareItemId").empty();  //清空
                $.each(data,function(i,obj){
        
                    var html="<option value='"+obj.id+"'>"+obj.itemName+"</option>";
                    $("#fCareItemId").append(html);  //append函数
             
                });
                
            },
            error: function(xhr) {
                //中间发生异常，具体查看xhr.responseText
                alert("error:" + xhr.responseText);
            }
           
        });
        
    });
</script>

注意: append函数与appendTo函数区别?

例如: $("<p>Hello World</p>").appendTo($("#two")); 

----><div id="two"> <p>Hello World</p> </div>

$("#fCareItemId").append("<option value='test'>测试</option>");

----><select name="fCareItemId" id="fCareItemId">
      <option  value="test">测试</option>
    </select>
实际上，使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。