JavaScript Ajax Json實現上下級下拉框聯動效果實例代碼
更新時間：2013年11月23日 14:47:52 作者：
這篇文章主要介紹了JavaScript Ajax Json實現上下級下拉框聯動效果實例代碼，有需要的朋友可以參考一下
最近嘗試做出一個部門和人員的下拉框聯動功能，部門和人員的對應關系是1:N
復制代碼 代碼如下:
<div class="forntName">部門</div>
<div class="inpBox">
<select name="department" id="department" onchange="change();" style="width:200px;" >
<option value='-1'>請選擇</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>
部門下拉框的onchange()事件走一個AJAX方法，返回一個JSON對象(JSON里放的是個LIST)。
js方法在此頁面的寫法:
復制代碼 代碼如下:
<script type="text/javascript">
function change(){
var departmentCode =$("#department").val();
var params = {
'departmentCode':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'>"+"部門人員為空"+"</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>
此處返回的data里包含list(list見后文)，list里包含著人員的代碼，人員的姓名兩個屬性。然后先把人員下拉框empty()，通過select控件append方法 添加新的下拉框元素。
后臺代碼:
復制代碼 代碼如下:
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;
}
這個方法是部門切換事件，通過departmentCode(field域，有set,get)來求的當前部門下的用戶放到userList中。
然后通過標準寫法把userList放到一個定義好的HashMap中，KEY為list。
復制代碼 代碼如下:
<STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG>
這是最為關鍵的一步，有的json對象創(chuàng)建方法也可以為JSONObject jso = new JSONObject() ； 然后把list里的記錄放入到jso中。。。
在這里是行不通的，前臺會認為返回的是個字符串。。。
struts中 返回類型為json
復制代碼 代碼如下:
<action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent">
<result type="json">
</result>
</action>
相關文章
這篇文章主要為大家詳細介紹了小程序實現頁面頂部選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
設置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數，具體的自己發(fā)揮。2010-05-05
這篇文章主要介紹了基于JS代碼實現實時顯示系統(tǒng)時間的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序中使用 async/await的方法,結合實例形式分析了微信小程序中async/await的功能、使用方法及操作注意事項,需要的朋友可以參考下2020-05-05
firefox下對ajax的onreadystatechange的支持情況分析
firefox下對ajax的onreadystatechange的支持分析。用的到的朋友可以參考下。2009-12-12
下面小編就為大家?guī)硪黄P于Iframe父頁面與子頁面之間的相互調用。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
解決option標簽selected="selected"屬性失效的問題
下面小編就為大家?guī)硪黄鉀Qoption標簽selected="selected"屬性失效的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
利用JavaScript實現創(chuàng)建虛擬鍵盤的示例代碼
這篇文章主要為大家詳細介紹了如何利用JavaScript實現創(chuàng)建虛擬鍵盤，文中的示例代碼講解詳細，對我們學習JavaScript有一定幫助，需要的可以參考一下2022-09-09
JavaScript之事件委托實例(附原生js和jQuery代碼)
下面小編就為大家?guī)硪黄狫avaScript之事件委托實例(附原生js和jQuery代碼)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
一個對于js this關鍵字的問題...2007-01-01