JS与Jquery之动态添加下拉框select并级联改变事件

JavaScript013

JS与Jquery之动态添加下拉框select并级联改变事件,第1张

1.可以动态添加多个下拉框,可减少下拉框

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)

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

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