关于bootstrap select 多选只能传递第一个选项的值到后端的问题

bootstrap select 多选传值只能传递第一个的值

最近在敲代码的时候使用到了bootstrap的select控件，需要将用户想要选择的多个组信息传递到后端。如下图所示：
这个问题困扰了我很久，最后才找到了原因。是由于我在传递数据的时候使用的序列化form表单的方法，那么val()就只能取到一个选中的值，无法传入多选的值。js代码如下：

$.fn.ajaxselectmore = function(options) {
    var select = this;
    var data = options.value.split(",");
    $.get(options.url,function(result){
        for(key in result){
            if(data.indexOf(key)>-1){
                select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
            }else{
                select.append("<option value='"+key+"'>"+result[key]+"</option>");
            }
        }
        //初始化selectpicker插件
        select.selectpicker({
        });
    });
};
$("#groupIdlist").change(function(){
            $("input[name= groupId]").val($("#groupIdlist").val())

})
$("#groupIdlist").ajaxselectmore({
    url:"/***",
    //默认取值
    value:$('#groupId').val()
});

前端页面：

	<div id="visibleGroup" class="layui-row hide">
						<div class="col-sm-2 col-md-2 label1" set-lan="html:visibleGroup">可见组</div>
						<div class="col-sm-4 col-md-4 item">
							<select class=" form-control selectpicker" multiple data-live-search="true" id="groupIdlist"
									name="groupIdlist" style="width: 100%" data-style="btn-info">
							</select>
							<input class=" form-control" type="text" style="display: none" id="groupId" name="groupId">
						</div>
					</div>

我们将select多选框groupIdlist的值赋给另一个隐藏的input：groupId即可，现在我们就可以把多选框的值正确传递了