ajax+struts实现多级下拉列表联动,无刷新

public ActionForward getOrganinfo_ajax(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String level2OrganId = request.getParameter( " level2OrganId " );
System.out.print(level2OrganId);
IDReportLogic dreportLogic = (IDReportLogic)SpringFactory.getBeanFactory().getBean( " dreportLogic " );

response.setContentType( " text/xml;charset=UTF-8 " );
response.setHeader( " Cache-control " , " no-cache " );

try {

String orgLevel = request.getParameter( " orgLevel " );
String orgId = request.getParameter( " orgId " );



/**/ /*
以下为前台当中接受到的xml结构。

StringBuffer sb = new StringBuffer();
sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
String str="<select><kkk><value>11111</value><text>北京</text></kkk>";
String str2="<kkk><value>3333</value><text>上海</text></kkk></select>";
sb.append(str);
sb.append(str2); */

PrintWriter out = response.getWriter();
out.write(str);
out.flush();
return null ;
} catch (Exception e) {
// TODO 自动生成 catch 块
request.setAttribute( " info " , " 获取二级机构异常! " );
e.printStackTrace();
return mapping.getInputForward();
}

}


二级机构:


< select name = " secOrganIdSel " id = " secOrganIdSel "
onchange = " selectChangeListener('2',this.options[this.selectedIndex].value); " >
< option value = " -1 " > 请选择机构.. </ option >
</ select >

三级机构:
< select name = " thdOrganIdSel " id = " thdOrganIdSel "
onchange = " selectChangeListener('3',this.options[this.selectedIndex].value); " >
< option value = " -1 " > 请选择机构.. </ option >

</ select >

四级机构:
< select name = " forthOrganIdSel " >
< option value = " -1 " > 请选择机构.. </ option >
</ select >

< script language = " javascript " type = " text/javascript " >
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

// 查询指定页面
function selectChangeListener(orgLevel,orgId) {

createXMLHttpRequest();

var url = " <%=request.getContextPath()%>/dreportAction.do?method=getOrganinfo_ajax&orgLevel= " + orgLevel + " &orgId= " + orgId;
xmlHttp.open( " get " ,url, true );
if (orgLevel == ' 2 ') {
// 如果是选择默认的第一个,则是清空后面3级机构和4级机构。
var tempSel = document.getElementById( " secOrganIdSel " );
if (tempSel.options[tempSel.selectedIndex].value == - 1 ) {
var tempSel_1 = document.getElementById( " thdOrganIdSel " );
tempSel_1.options.length = 1 ;
var tempSel_2 = document.getElementById( " forthOrganIdSel " );
tempSel_2.options.length = 1 ;
return false ;
}
xmlHttp.onreadystatechange = callback2;
} else if (orgLevel == ' 3 ') {
// 如果三级机构默认的是第一个选项,则清空第4级机构

var tempSel = document.getElementById( " thdOrganIdSel " );
if (tempSel.options[tempSel.selectedIndex].value == - 1 ) {
var tempSel_2 = document.getElementById( " forthOrganIdSel " );
tempSel_2.options.length = 1 ;
return false ;
}
xmlHttp.onreadystatechange = callback3;
}

xmlHttp.send( null );
}

// 返回信息处理,二级机构下拉列表返回结果
function callback2() {
if (xmlHttp.readyState == 4 ) {
if (xmlHttp.status == 200 ) {
var xmlDoc = xmlHttp.responseXML;
changeSel(' 2 ',xmlDoc);
} else {
window.alert( " 您所请求的页面有异常。 " );
}
}
}


// 返回信息处理,三级机构下拉列表返回结果
function callback3() {
if (xmlHttp.readyState == 4 ) {
if (xmlHttp.status == 200 ) {
var xmlDoc = xmlHttp.responseXML;
changeSel(' 3 ',xmlDoc);
} else {
window.alert( " 您所请求的页面有异常。 " );
}
}
}

// 更新机构下拉列表
function changeSel(orgLevel,xmlDoc) {

// var xsel = xmlDoc.getElementsByTagName('kkk');
var xsel = xmlDoc.documentElement.childNodes;

// alert(xsel.length);
if (orgLevel == ' 2 ') {
// 二级机构,3级机构和4级机构需要清空。
var tempSel_1 = document.getElementById( " thdOrganIdSel " );
tempSel_1.options.length = 0 ;
tempSel_1.add( new Option('请选择机构',' - 1 '))
var tempSel_2 = document.getElementById( " forthOrganIdSel " );
tempSel_2.options.length = 0 ;
tempSel_2.add( new Option('请选择机构',' - 1 '))

for ( var i = 0 ; i < xsel.length;i ++ ) {
var xvalue = xsel[i].childNodes[ 0 ].firstChild.nodeValue;
var xtext = xsel[i].childNodes[ 1 ].firstChild.nodeValue;
var option = new Option(xtext,xvalue);
tempSel_1.add(option);
}

} else if (orgLevel == ' 3 ') {
// 三级机构,四级机构需要清空

var tempSel_2 = document.getElementById( " forthOrganIdSel " );
tempSel_2.options.length = 0 ;
tempSel_2.add( new Option('请选择机构',' - 1 '))

for ( var i = 0 ; i < xsel.length;i ++ ) {
var xvalue = xsel[i].childNodes[ 0 ].firstChild.nodeValue;
var xtext = xsel[i].childNodes[ 1 ].firstChild.nodeValue;
var option = new Option(xtext,xvalue);
tempSel_2.add(option);
}

}

}
</ script >
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值