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

最新推荐文章于 2024-07-09 15:47:50 发布

weixin_44213863

最新推荐文章于 2024-07-09 15:47:50 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签： java

本文链接：https://blog.csdn.net/weixin_44213863/article/details/109180043

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个关于Bootstrap Select多选控件的问题及解决方案。当尝试将多个选中的值传递给后端时，发现只能传递第一个选中项的值。通过调整前端JS代码，实现了正确地获取并传递多选框的所有选中值。

摘要由CSDN通过智能技术生成

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即可，现在我们就可以把多选框的值正确传递了