用DWR框架技术轻松实现动态级联菜单

这里说的动态级联菜单，指的是两个或多个下拉框(对应HTML中的SELECT标签)，它们存在父子关系。其中某个下拉框的值发生变化时，它的子下拉框可选择的值也会发生变化，并且这些变化的值都是动态地从数据库中取出来的。

以前用其他方式实现过，但有的有些小BUG，有的代码可读性差，或者实现代码很多，实现起来麻烦，维护起来也麻烦。最近看了一下DWR，总算用一种比较轻松的方式实现了动态级联菜单。

实现方法如下：

首先定义好服务器端Java类，用来获取数据库中的动态信息，其接口方法类似于：

public List getLvlList(String parentStr);

然后在dwr.xml中配置好相应的类和接口：

<create javascript="JDemo" creator="new">
            <param name="class" value="com.will.dwrtest.Demo"/>
            <include method="getLvlList"/>
</create>

最后是前台页面，其中Javascript代码类似于：

function changeSelect(vid, vvalue) {
    JDemo.getLvlList(vvalue, function(data) {
        var ops_lenth = $(vid).options.length;
        for (var i=0; i<ops_lenth; i++) {
            $(vid).options.remove(0);
        }
        //alert(data.length);
        var op_cir;
        for (var i=0; i<data.length; i++) {
            op_cir = new Option(data[i], data[i]);
            //alert(op_cir.value);
            $(vid).options.add(op_cir);
        }
    });
}

在页面中可能定义几个这样的下拉框：

<select id="v1" οnchange="changeSelect('v2', this.value);"></select>

<select id="v2" οnchange="changeSelect('v3', this.value);"></select>

<select id="v3" οnchange=""></select>