用jquery结合json做一个二级联动下拉菜单

本文和之前jquery返回json那篇一样，第二级下拉菜单使用dom方式

<script type="text/javascript">
$(document).ready(function(){
var obj=$("#category");
if(typeof obj != 'undefined' && obj !=''){
	showGongdanType(obj.val());
}
});
function onchangeShow(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:onchangecallback
});
}
function onchangecallback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
}
function showGongdanType(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
    if("${gongdanType}"!=''){
    	for(var i=0;i<data.length;i++){
    		if(data[i].value=="${gongdanType}")
    		select_root.selectedIndex=i+1;
    	}
    }
}
</script>

			<td width="10%" height="25" class="alignLeft">
				统计类别：
			</td>
			<td width="10%" valign="top" class="alignLeft">
					<s:select name="form.category" list="categorys" id="category"
						listKey="value" listValue="valueName" 
						onchange="onchangeShow(this.value)">
					</s:select>
			</td>
			<td width="10%" height="25" class="alignLeft">
				工单类型：
			</td>
			<td width="10%" valign="top" class="alignLeft">
			 <select name="form.gongdanType" id="type" >
   			</select>	
</td>