Struts2+jquery实现下拉菜单联动

    弄了小半天，利用jquery实现了一个菜单(select)联动，属原创，当然也参考了其它的作品。若有更好的办法肯请指教。
    在实现之前，需要让struts2支持json格式的数据。这里需要一个插件jsonplugin-0[1].32.jar。中间的32表示支持struts2.0.x。如果使用struts2.1以上，则需要jsonplugin-0[1].34.jar。然后在struts.xml中配置如下：
           <package name="ajax" extends="json-default">
<action name="ajaxQuery" class="Action">
<result type="json"></result>
</action>
</package>
    支持json的action要独立创建一个包，并继承json-default。

    实现菜单（表单）联动主要有以下步骤（初始化相对容易，这里就不说了，主要讨论当鼠标事件发生的时候发生的变化，这里主要指二级联动）：

    1.发生事件。
       经过在网上一番查找，发现表单联动所用的鼠标事件都是onChange，所以这里也用onChange吧。

    2.向服务器发出请求。
      在onChange的函数里就需要写js代码了，如下：
      function selectOnClick(){
var url = 'ajaxQuery!ajaxQuerySubOrgs.action';
var params = {orgFirstLevelId:$('#orgFirstLevelId').val()};
$.post(url,params,callback,'json');
     上面红色的部分是第一级select的id。通过这个id，要得到我们选中哪个值了，要通过这个值查找二级select。这里面的params组成的是一个js的对象，通过这个对象将值连通url传到后台的Action。回调函数callback第五步。

    3.服务器向应请求，并查找返回时所需要的二级表单的数据。
      这一步相对简单，就是要得到二级select的数据，每个人的情况不一样，不再讨论。

    4.将服务数据封装成JSON格式，并返回到客户端。
       这一步最关键。因为js支持json的数据格式，因此要将得到的数据转成json。这里使用到了一个java版的将普通数据转成json数据的包json-lib-2.3-jdk13.jar。这个包还需要以下几个包的支持:
     jakarta commons-lang 2.4
     jakarta commons-beanutils 1.7.0
     jakarta commons-logging 1.1.1
     jakarta commons-collections 3.2
     ezmorph 1.0.6
     这里最重要的就是最后两个包需要下，其它的在SSH框架里都有。但collections的版本在SSH里不够，这个包必须要3.2以上的才行。因为json是需要map类型的数据支持的，而老版本的collections都不支持这个格式。
      首先要对二级select的数据做成Map。因为select下的option需要两个值，一个是属性value，另一个就是显示在select上的值。因此将May中的key作为value，将May中的value作为select的值。值容易得到，而key可以使用数据库中的id，这样会更方便。当然也可重新生成key。因此，一个json对象就需要map中存两项数据，一个是json中的key，一个是json中的value（一个json对象的格式是这样的：{id:value}。而一个select中需要两个json对象，因此需要这样的json格式：{id:值,value:值}，这样就构成一个select需要的数据。其中“，”号左右分别是一个map中的两个数据项。）代码如下：
    for (Iterator<Orgnization> iterator = orgsList.iterator();                iterator.hasNext();) {
Orgnization org = (Orgnization) iterator.next();
Map<String,String> tempMap = new HashMap<String,String>();
//制做用于转换json格式的list
tempMap.put("id", Integer.toString(org.getId()));
tempMap.put("name", org.getName());
orgsListJson.add(tempMap);
}
     最后一行代码的意思是将生成有两个数据项的map存到一个list中。在最后就要用到上面的json工作进行转换。代码如上：
    JSONArray json = JSONArray.fromObject(orgsListJson);
    有这句话就够了。然后就是返回（这一步参照了其它网友的内容，可能有更好的方法，期待探讨）：
HttpServletResponse response= ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.print(json); out.close();
     在Action中，返回success就可以了。

    5.客户端接收，并改变html代码。
       这一步就是利用回调函数改变html代码：
function callback(data){
var obj = eval(data);
$("#orgSecondLevelId option").remove();
for(var p in obj){
var org = obj[p];
var ops = $("#orgSecondLevelId");
ops.append("<option value="+org.id+">"+org.name+"</option>");
}
       这个代码只要懂点jquery的人都能看懂，关键是最后一步，我用字符串拼接的方式追加每个<option>，可能不太好。orgSectonLevelId是二级select的id。我们要动态的改变它下面的<option>。

评论

4 楼 bushkarl 2010-08-19  

3 楼 nolan022 2009-10-19  

sorry 忘记说我的邮箱了。 [e-mail] qq 854056672 msn [e-mail]  谢谢了。

2 楼 nolan022 2009-10-19  

你好。能将你这个的demo发给我吗？谢谢

1 楼 kjj 2009-09-06  

貌似与struts2 没多大关系，只要action返回json就行，不在乎是什么框架！！