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 " >
2

var xmlHttp;
3

function createXMLHttpRequest() {
5

if (window.ActiveXObject) {
6

xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
7

} else if (window.XMLHttpRequest) {
8

xmlHttp = new XMLHttpRequest();
9

}
10

}
11

// 查询指定页面
13

function selectChangeListener(orgLevel,orgId) {
14

createXMLHttpRequest();
16

var url = " <%=request.getContextPath()%>/dreportAction.do?method=getOrganinfo_ajax&orgLevel= " + orgLevel + " &orgId= " + orgId;
18

xmlHttp.open( " get " ,url, true );
19

if (orgLevel == ' 2 ') {
20

// 如果是选择默认的第一个，则是清空后面3级机构和4级机构。
21

var tempSel = document.getElementById( " secOrganIdSel " );
22

if (tempSel.options[tempSel.selectedIndex].value == - 1 ) {
23

var tempSel_1 = document.getElementById( " thdOrganIdSel " );
24

tempSel_1.options.length = 1 ;
25

var tempSel_2 = document.getElementById( " forthOrganIdSel " );
26

tempSel_2.options.length = 1 ;
27

return false ;
28

}
29

xmlHttp.onreadystatechange = callback2;
30

} else if (orgLevel == ' 3 ') {
31

// 如果三级机构默认的是第一个选项，则清空第4级机构
32

var tempSel = document.getElementById( " thdOrganIdSel " );
34

if (tempSel.options[tempSel.selectedIndex].value == - 1 ) {
35

var tempSel_2 = document.getElementById( " forthOrganIdSel " );
36

tempSel_2.options.length = 1 ;
37

return false ;
38

}
39

xmlHttp.onreadystatechange = callback3;
40

}
41

xmlHttp.send( null );
43

}
44

// 返回信息处理,二级机构下拉列表返回结果
46

function callback2() {
47

if (xmlHttp.readyState == 4 ) {
48

if (xmlHttp.status == 200 ) {
49

var xmlDoc = xmlHttp.responseXML;
50

changeSel(' 2 ',xmlDoc);
51

} else {
52

window.alert( " 您所请求的页面有异常。 " );
53

}
54

}
55

}
56

// 返回信息处理,三级机构下拉列表返回结果
59

function callback3() {
60

if (xmlHttp.readyState == 4 ) {
61

if (xmlHttp.status == 200 ) {
62

var xmlDoc = xmlHttp.responseXML;
63

changeSel(' 3 ',xmlDoc);
64

} else {
65

window.alert( " 您所请求的页面有异常。 " );
66

}
67

}
68

}
69

// 更新机构下拉列表
71

function changeSel(orgLevel,xmlDoc) {
72

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

var xsel = xmlDoc.documentElement.childNodes;
75

// alert(xsel.length);
77

if (orgLevel == ' 2 ') {
78

// 二级机构,3级机构和4级机构需要清空。
79

var tempSel_1 = document.getElementById( " thdOrganIdSel " );
80

tempSel_1.options.length = 0 ;
81

tempSel_1.add( new Option('请选择机构',' - 1 '))
82

var tempSel_2 = document.getElementById( " forthOrganIdSel " );
83

tempSel_2.options.length = 0 ;
84

tempSel_2.add( new Option('请选择机构',' - 1 '))
85

for ( var i = 0 ; i < xsel.length;i ++ ) {
87

var xvalue = xsel[i].childNodes[ 0 ].firstChild.nodeValue;
88

var xtext = xsel[i].childNodes[ 1 ].firstChild.nodeValue;
89

var option = new Option(xtext,xvalue);
90

tempSel_1.add(option);
91

}
92

} else if (orgLevel == ' 3 ') {
94

// 三级机构，四级机构需要清空
95

var tempSel_2 = document.getElementById( " forthOrganIdSel " );
97

tempSel_2.options.length = 0 ;
98

tempSel_2.add( new Option('请选择机构',' - 1 '))
99

100

for ( var i = 0 ; i < xsel.length;i ++ ) {
101

var xvalue = xsel[i].childNodes[ 0 ].firstChild.nodeValue;
102

var xtext = xsel[i].childNodes[ 1 ].firstChild.nodeValue;
103

var option = new Option(xtext,xvalue);
104

tempSel_2.add(option);
105

}
106

107

}
108

109

}
110

111

112

</ script >

posted on 2008-04-07 14:49 JavaCoffe 阅读(4040) 评论(8) 编辑收藏所属分类: JavaScript&Ajax 、Ajax

FeedBack: