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中。