用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" onchange="changeSelect('v2', this.value);"></select>

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

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

你可能感兴趣的:(JavaScript,框架,数据库,function,DWR,include)