JavaScript Ajax Json Implementation of lower-and upper-level drop-down box Interaction Effect instance code

Recently, I tried to create a drop-down box linkage function for departments and personnel. The relationship between departments and personnel is.

Copy codeThe Code is as follows:
<Div class = "forntName"> Department </div>
<Div class = "inpBox">
<Select name = "department" id = "department" onchange = "change ();" style = "width: 200px;">
<Option value = '-1'> select </option>
<S: iterator value = "departmentList">
<Option value = '<s: property value = "departmentCode"/>'> <s: property value = "departmentName"/> </option>
</S: iterator>
<Select>
</Div>
<SPAN style = "WHITE-SPACE: pre"> </SPAN> <div class = "forntName"> personnel </div>
<Div class = "inpBox">
<Select name = "workorderOperator" id = "workorderOperator" style = "width: 200px;">

<S: iterator value = "userList">
<Option value = '<s: property value = "userName"/>'> <s: property value = "userName"/> </option>
</S: iterator>
</Select>
</Div>

The onchange () event in the department drop-down box uses an AJAX method to return a JSON object (a list is put in JSON ).

Js Method on this page:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function change (){
Var departmentCode = $ ("# department"). val ();

Var params = {
'Destentcode': departmentCode
};
$. Ajax ({
Type: 'get ',
Url: "departmentChangeEvent.shtml ",
Cache: false,
Data: params,
DataType: 'json ',
Success: function (data ){
Var sel2 = $ ("# workorderOperator ");
Sel2.empty ();
If (data = null)
{
Sel2.append ("<option value = '-1'>" + "Empty team member" + "</option> ");
}
Var items = data. list;
If (items! = Null)
{
For (var I = 0; I <items. length; I ++)
{
Var item = items [I];
Sel2.append ("<option value = '" + item. userName + "'>" + item. userChinesename + "</option> ");
};
}
Else
{
Sel2.empty ();
}
},
Error: function (){
Return;
}
});
// $. Post (url, params, callback );
}
</Script>

The data returned here contains the list (see the following document for list), the list contains the code of the person, and the name of the person. Then, add a new drop-down box element through the select control append method in the drop-down box empty.

Background code:

Copy codeThe Code is as follows:
Public String departmentChangeEvent () throws Exception {
UserList = service. queryForList ("Workorder. queryUserByDepartmentCode", departmentCode );
If (userList! = Null & userList. size ()> 0)
{
HttpServletResponse response = ServletActionContext. getResponse ();
Response. setContentType ("text/html; charset = UTF-8 ");
Response. setHeader ("Pragma", "No-cache ");
Response. setHeader ("Cache-Control", "no-cache ");
Response. setHeader ("Cache-Control", "no-store ");
PrintWriter writer = response. getWriter ();
JSONObject json = new JSONObject ();
Map map = new HashMap ();
Map. put ("list", userList );
JSONObject jso = JSONObject. fromObject (map );
Writer. write (jso. toString ());
Writer. flush ();
Writer. close ();}
Return null;
}

This method is a department switchover event. users under the current Department obtained through departmentCode (field, with set, get) are placed in the userList.

Then, put the userList in a defined HashMap using the standard writing method, and the KEY is list.

Copy codeThe Code is as follows:
<STRONG> JSONObject jso = JSONObject. fromObject (map); </STRONG>

This is the most critical step. Some json object creation methods can also be JSONObject jso = new JSONObject (); and then put the records in the list into jso...

It does not work here, and the front-end will think that the returned string is...

The return type in struts is json.

Copy codeThe Code is as follows:
<Action name = "departmentChangeEvent" class = "workorderAction" method = "departmentChangeEvent">
<Result type = "json">
</Result>
</Action>