bootstrap-select 下拉多选控件 下载及使用

效果： 

bootstrap-select 下载地址 

https://developer.snapappointments.com/bootstrap-select/

 git下载地址

https://github.com/silviomoreto/bootstrap-select

 

参考地址

基础使用

https://blog.youkuaiyun.com/qq_37677519/article/details/78143522

案例扩展

（多案例）https://www.jianshu.com/p/4759623498af

https://blog.youkuaiyun.com/zxl_langya/article/details/79247307

 

 

下载相关文件，并在页面中引用css及js，注意需要先引入jqury。

        <link th:href="/css/bootstrap.min.css" rel="stylesheet"/>
	<!-- bootstrap-select 下拉选择插件样式 -->
	<link th:href="/libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>

	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<!-- bootstrap-select 下拉选择插件 -->
	<script src="/libs/bootstrap-select/bootstrap-select.min.js"></script>
	<script src="/libs/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>

<input type="hidden" class="form-control" name="channelsList" id="channelsList" >
渠道：
<select name="channels" id="channels"  class="selectpicker" title="全部" multiple data-live-search="true" data-selected-text-format="count > 2">
    <option value="10001">测试1</option>
    <option value="10002">测试2</option>
    <option value="10003">测试3</option>
</select>

提交表单时给channelsList赋值，后端通过数组或字符串接收channelsList值(字符串将取到逗号分隔的字符串)。这里我也不知道用什么方式获取多选值比较好，只能用比较原始的方式了，如果有大神告诉更好的方法，请留言，感激不尽！

1. 直接val()获取

function doSubmit(){
	alert($("#channels").val());
	$("#channelsList").val($("#channels").val());
	//后端如果用字符串接收，则获取逗号拼接字符串：10001,10002,10003
	//后端如果用数组接收，则获取到的是数组：[10001,10002,10003]
}

2. jQuery遍历选中项获取

    function doSubmit(){
            var str=[];
            $("#channels option:selected").each(function () {
                str.push($(this).val());// 收集选中项
            })
			alert(str);
            $("#channelsList").val(str);
        }