DWR框架技术实现下拉动态级联

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

以前用其他方式实现过，但有的有些小BUG，有的代码可读性差，或者实现代码很多，实现起来麻烦，维护起来也麻烦。最近看了一下AJAX框架技术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" onchange="changeSelect('v2', this.value);"></select>

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

<select id="v3" onchange=""></select>