`

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

    博客分类:
  • ajax
阅读更多
本文和之前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>

分享到:
评论
1 楼 flyingpig4 2010-02-25  
想跟你请教一下:SSH+JQuery的整合
我的邮箱是flyallen5@hotmail.com
谢谢

相关推荐

Global site tag (gtag.js) - Google Analytics