JavaScript Ajax Json實作上下級下拉框連動效果實例程式碼_javascript技巧

最近嘗試做出一個部門和人員的下拉框連動功能，部門和人員的對應關係是1:N

複製代碼 代碼如下:

部門

 

 
 請選擇
 
  
 
  
 

  SPAN>

人員

 

 

 
   option>
 
 
 

部門下拉框的onchange()事件走一個AJAX方法，回傳一個JSON物件(JSON裡放的是個LIST)。

js方法在此頁的寫法:​​

複製代碼 代碼如下:

 




此處傳回的data裡包含list(list見後文)，list裡包含著人員的程式碼，人員的姓名兩個屬性。然後先把人員下拉框empty()，透過select控制項append方法 新增新的下拉框元素。

後台程式碼:

複製程式碼

程式碼如下:

public String DepartmentChangeEvent() 傳送例外狀況{
  userList=service.queryForList("Workorder.queryUserByDepartmentCode", DepartmentCode);
List if(useruserList=nizeif(userusers);
？ >  {
   HttpServletResponse response = ServletActionContext.getResponse();
   response.setCont );
   response.setHeader("Cache-Control","no-cache");
   response.setHeader("Cache-Control", "no-store");
   response.setHeader("Cache-Control", "no-store");
  getWriter();
   JSONObject json = new JSONObject();
   Map map = new HashMap();
     地圖);
   writer.write(jso.toString());
      writer.flush();
      writer.close();
      writer.close();  }
         回傳 null； 
   } 

這個方法是部門切換事件，透過departmentCode(field域，有set,get)來求目前部門下的使用者放到userList中。

然後透過標準的寫法把userList放入定義好的HashMap中，KEY為list。

複製程式碼程式碼如下：

JSONObjectso = JmapSON. ; 

這是關鍵的一步，有的json物件建立方法也可以為JSONObject jso = new JSONObject() ；然後把list裡的貨架記錄到jso。 這裡是行不通的，前台會認為回傳的是字串。

struts中回傳型別為json

複製程式碼

程式碼如下：