本文和之前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>