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