JavaScript Ajax JSON implementation of superior and subordinate dropdown frame linkage effect Instance Code _javascript skill

Recently tried to make a department and personnel of the Drop-down box linkage function, department and personnel of the corresponding relationship is 1:n

Copy Code code as follows:

<div class= "Forntname" > Department </div>
<div class= "Inpbox" >
<select name= "department" id= "department" onchange= "Change" (); "style=" width:200px; ">
<option value= '-1 ' > Please 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 of the Departmental dropdown box walks an Ajax method that returns a JSON object (a list in JSON).

The JS method is written on this page:

Copy Code code as follows:

<script type= "Text/javascript" >
function Change () {
var departmentcode =$ ("#department"). Val ();

var params = {
' Departmentcode ':d epartmentcode
};
$.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 ' >" + "Department staff is empty" + "</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 below), the list contains the people's Code, the person's name two attributes. Then, empty () The Person dropdown box and add a new drop-down element by using the Select control Append method.

Background code:

Copy Code code 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 departmental switch event, which is placed in the UserList by Departmentcode (Field field, Set,get) to the user under the current department.

The userlist is then put into a well-defined hashmap by standard notation, and key is the list.

Copy Code code 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 the JSO ...

It's not going to work here, the front desk will think it's a string ...

The return type in struts is JSON

Copy Code code as follows:

<action name= "departmentchangeevent" class= "workorderaction" method= "Departmentchangeevent" >
<result type= "JSON" >
</result>
</action>