基于select2多选下拉菜单带模糊搜索，并传值给java后端

前端效果图：

带模糊搜索，可以选中，也可以删除选择的，也可以全部删除，被选中的会变黑。

实现方式：

首先，加入一些依赖的js资源，可以直接网上获得：

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdn.bootcss.com/select2/4.0.10/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/select2/4.0.10/css/select2.css" rel="stylesheet">

html里的select语句，内容不需要填，值批量写在js里：

<select name="join_fields" id="join_fields" class="selectpicker show-tick form-control select2 select2-drop-mask"  multiple="multiple" style="position:absolute; left: 300px;top:200px;width :300px;height: 100px" >
                                    </select>

切记一定要带个input的接收select的结果，因为select的值不能直接传给后端。

<input type="hidden" id="select_id" name="select_id" />

js的：

<script type="text/javascript">
    var dataList = [
        { id: 0, text: 'account_type' },
        { id: 1, text: 'activity_type' },
        { id: 2, text: 'ad_auto_type' },
        { id: 3, text: 'ad_business_type' },
        { id: 4, text: 'ad_comsumption_type' }
    ];

    $(document).ready(function() { $("#join_fields").select2({
        data: dataList,
        minimumInputLength : 0,
        placeholder:"可多选",//默认值
        allowClear: true,

    }); });


    $("#join_fields").change(function(){
        state = $('#join_fields option:selected').val();
        $("#state").val(state);
        // alert($('#join_fields').val());
        $("#select_id").val($('#join_fields').val());//赋值给隐藏的文本框
    });

然后用form的统一提交，post传

js:

//提交
function submit(obj) {
    $.ajax({
        cache: true,
        type: "POST",
        url: "/base_service/ar_monitor_sql_generate/submit/ajax",
        data: $(obj).serialize(),
        error: function (request) {
            alert("Connection error");
        },
        success: function (data) {
            alert("success");
            $('.close').click();
        }
    });
};

后台java部分，在controller里用request收

String select_id = request.getParameter("select_id");
logger.info(select_id);

日志结果是：

接收的是id号，即成功啦