2.选中第一个下拉框的任意一个值,同时第三个下拉框的值跟着改变,显示对应的数据。
ps:what?光动态添加就足以。。。。赋值还不能直接赋,而是添加下拉时就赋值。。。。。经过百般折磨,头发掉了n根,最终通过巧妙的思路解决了,在此记录下。若对你有所帮助,点赞加关注吧!后续及时更新。
第一个下拉选项显示
选择下拉项,同时加载数据到第三个下拉框
注:在这里直接去掉了第二行的标签
为了获取改变数据的行,试了很久,动态生成的下拉框无法获取到索引,所以才想到了使用id,并且给id后加一个数字
废话就不多说了,就以楼主的例子来解答吧。
页面首先是一个下拉列表和多个复选框,那么假设页面中这个下拉列表的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)
至此,整个过程就结束了。
说起来是简单,但每一步都会有一些知识点,还是要研究一下才能做出来的。