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

JavaScript015

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)

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

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