欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript Ajax Json实现上下级下拉框联动

程序员文章站 2022-05-19 21:23:59
...
最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N

[html]

<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方法在此页面的写法:

[javascript]

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

}

[javascript]

</script>

此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过select控件append方法 添加新的下拉框元素。

后台代码:

[java]

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中。www.2cto.com

然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。

[java]

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

这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。

在这里是行不通的,前台会认为返回的是个字符串。。。

struts中 返回类型为json

[html]

<action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent">

<result type="json">

</result>

</action>