JavaScript Ajax Jsonで上下のドロップダウンボックスの連携効果を実現コード例

JavaScript Ajax Jsonで上下のドロップダウンボックスの連携効果を実現コード例_javascriptスキル

WBOY

リリース： 2016-05-16 17:12:56

オリジナル

1475 人が閲覧しました

最近、部門と人事のドロップダウンボックス連携機能を作成してみました。部門と人事は1:Nの対応関係です

。

コードをコピーコードは次のとおりです:

人

部門ドロップダウンボックスの onchange() イベントは、AJAX メソッドを受け取り、JSON オブジェクトを返します (JSON には LIST が含まれます)。

このページの js メソッドの書き方:

コードをコピーコードは次のとおりです:

ここで返されるデータにはリストが含まれています (以下のリストを参照)。このリストには、個人のコードと個人の名前という 2 つの属性が含まれています。次に、最初に人事ドロップダウンボックスを empty() し、選択コントロールの追加メソッドを通じて新しいドロップダウンボックス要素を追加します。

バックエンドコード:

コードをコピー

コードは次のとおりです:

public StringDepartmentChangeEvent() 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","キャッシュなし");
 response.setHeader("Cache-Control","no-cache");
 response.setHeader("Cache-Control", "no-store");
 PrintWriter ライター = 応答.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();  }
 null を返します。  
 } 