前端效果图:
带模糊搜索,可以选中,也可以删除选择的,也可以全部删除,被选中的会变黑。
实现方式:
首先,加入一些依赖的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号,即成功啦