最近在敲代码的时候使用到了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:"/incident/user/getAllData", //默认取值 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即可，现在我们就可以把多选框的值正确传递了
