快捷導(dǎo)航

JavaScript Ajax Json實(shí)現(xiàn)上下級(jí)下拉框聯(lián)動(dòng)效果實(shí)例代碼

更新時(shí)間：2013年11月23日 14:47:52 作者：

這篇文章主要介紹了JavaScript Ajax Json實(shí)現(xiàn)上下級(jí)下拉框聯(lián)動(dòng)效果實(shí)例代碼，有需要的朋友可以參考一下

最近嘗試做出一個(gè)部門(mén)和人員的下拉框聯(lián)動(dòng)功能，部門(mén)和人員的對(duì)應(yīng)關(guān)系是1:N

<div class="forntName">部門(mén)</div>
 <div class="inpBox">
 <select  name="department" id="department"  onchange="change();" style="width:200px;" >
 <option value='-1'>請(qǐng)選擇</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">人員</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>

部門(mén)下拉框的onchange()事件走一個(gè)AJAX方法，返回一個(gè)JSON對(duì)象(JSON里放的是個(gè)LIST)。

js方法在此頁(yè)面的寫(xiě)法:

復(fù)制代碼代碼如下:

此處返回的data里包含list(list見(jiàn)后文)，list里包含著人員的代碼，人員的姓名兩個(gè)屬性。然后先把人員下拉框empty()，通過(guò)select控件append方法添加新的下拉框元素。

后臺(tái)代碼:

復(fù)制代碼代碼如下:

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;  
   }  

這個(gè)方法是部門(mén)切換事件，通過(guò)departmentCode(field域，有set,get)來(lái)求的當(dāng)前部門(mén)下的用戶放到userList中。

然后通過(guò)標(biāo)準(zhǔn)寫(xiě)法把userList放到一個(gè)定義好的HashMap中，KEY為list。

復(fù)制代碼代碼如下:

<STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG>

這是最為關(guān)鍵的一步，有的json對(duì)象創(chuàng)建方法也可以為JSONObject jso = new JSONObject() ；然后把list里的記錄放入到j(luò)so中。。。

在這里是行不通的，前臺(tái)會(huì)認(rèn)為返回的是個(gè)字符串。。。

struts中返回類(lèi)型為json

復(fù)制代碼代碼如下:

  <action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent"> 
       <result type="json">
   </result> 
        </action>

您可能感興趣的文章: