如何实现下拉框选项改变的事件

Question

环境是用SSH搭建的 是二次开发，现在要在页面上添加一个功能，就是添加一个下拉框和一组复选框，当下拉框内容改变，关联的一组复选框也会相应的改变，下拉框读取的是数据库中的一个表的name字段，复选框也是读取数据库中的一个表的name字段，两表之间无关联，但有一个关联表，其中只有两个字段分别是两个表的 name 字段，现在要实现的是 当改变下拉框中的选项后，触发一个动作，根据下拉框的内容（也就是表中name字段）去关联表中查找出所关联的复选框的内容（也就是其表中name字段），显示在页面上。
举个例子简单来说比如下拉框是所有班级的选项，当选择一个班级后，显示出这个班级的所有学生，数据库汇总有班级表、学生表、班级学生的关联表（表中只有班级和学生的名称两个字段）
谁有类似这样功能的实例发给我 感激不尽，或有什么思路说来听听 谢谢
业务逻辑用struts1实现好了，action中把需要的数据保存在list中，list中保存的是多个实体类的对象，每个实体类包含两个属性id和name，然后又把list保存在了request中，现在就差页面的实现了，就是不知道如何用jquery把一组的复选框替换成新的一组，复选框的value是实体类的ID属性，显示的内容是name属性，（复选框和遍历标签是struts1的标签）
<logic:present name="typeGroupList" scope="request">
<logic:iterate id="tg" name="typeGroupList">
<html:multibox property="typeGroupArray"><bean:write name="tg" property="typeGroupId"/></html:multibox>
<bean:write name="tg" property="typeGroupName"/>
</logic:iterate>
</logic:present>

Answer 1

废话就不多说了，就以楼主的例子来解答吧。

页面首先是一个下拉列表和多个复选框，那么假设页面中这个下拉列表的id为theClass，复选框的name为student，值为各个学生的姓名。

首先是页面加载进来的时候，在action里获取到所有的班级列表，以及默认的那个班级的学生列表。那么页面就可以使用jstl或者直接遍历，填充班级下拉列表和学生复选框。这个代码就不上了，都是java代码。

接下来要做的事，就是当班级下拉列表发生改变时，重新加载学生复选框住一块。这里通常使用ajax实现，代码类似于这样：

// 假设楼主使用了jquery，因为这样的话ajax请求会比较简单
$(function(){
    // 给班级下拉列表添加onchange事件
    $('#theClass').bind('change', function(){
        // 根据班级名称获取json格式的学生列表
        $.post('返回学生列表的url',{class:'班级名称'},function(data){
            // data就是返回的学生列表
            // 移除原有的学生复选框
            $(':checkbox[name=student]').remove();
            // 根据json格式的返回值，重新创建学生复选框
            // 遍历data，创建学生复选框
        }, 'json');
    })
})

所以楼主需要首先解决几个问题：

1、如何返回json格式的学生列表

这个问题不难，struts2可以解决，因为struts2可以返回json格式的数据，你到网上查一查。解决这个问题，你就知道那个返回学生列表的url该填什么值了。

2、返回的data是什么格式的

上面说到返回的data应该是json格式，具体其实应该是这样的：

[{
    name:'学生A',
    id:'学生A的id'
},{
    name:'学生B',
    id:'学生B的id'
},{
    name:'学生C',
    id:'学生C的id'
}]

3、拿到data，如何生成新的学生复选框

这个是html节点操作的问题。首先是要先移除原来的那些复选框的，这个上面的代码已经有了。接下来是创建新的复选框，大致如下：

var html = "";
for(var i = 0, len = data.length; i < len; i++){
    html += "<input type='checkbox' name='student' value='" + data[i].id + "'/>" + data[i].name
}
// 重新放到原来复选框的位置
$('#studentList').html(html);

至此，整个过程就结束了。

说起来是简单，但每一步都会有一些知识点，还是要研究一下才能做出来的。

追问

谢谢你的细心解答，业务逻辑用struts1实现好了，action中把需要的数据保存在list中，list中保存的是多个实体类的对象，每个实体类包含两个属性id和name，然后又把list保存在了request中，现在就差页面的实现了，就是不知道如何用jquery把一组的复选框替换成新的一组，复选框的value是实体类的ID属性，显示的内容是name属性

追答

你要解决的第一个问题是，你到底会不会返回json格式的数据，或者返回xml格式的数据也行。所以在解决这个问题之前，你还得看看，你到底会不会ajax请求。

Answer 2

这个需求的话，是常见的，一般做法是，在下拉框中有个onchange事件，用js处理这个事件，使用ajax技术发请求从后台java拿数据 ，返回数据后，用js改变关联的复选框的值