十五、bootstrap-select的使用方法

参考来源https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html

需要的css和js

<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>

　　

html中的代码：

title为默认显示的内容

<select class="selectpicker" multiple data-live-search="true"  id="apply">\'</select>

以下两句话必不可少

$("对象").selectpicker("refresh");
$(".selectpicker").selectpicker("refresh");
$(".selectpicker").selectpicker("render");

选中事件（每点击一个会自动将value的值放入数组中）

选中的value的值

$(".selectpicker").on(\'changed.bs.select\',function(e){ //选中的value值，会自动添加到数组中
 var induAll = $(this).val(); //数组
 indusJson = JSON.stringify(induAll);//转换成json格式的字符串

 console.log(indusJson)
 console.log(typeof indusJson) });

默认选中赋值

$("对象").selectpicker(\'val\',applySelect);

applySelect是数组[1,2,3]

　　

案例

 

HTML部分代码

+\'<div class="mui-input-row real-label">\'
            +\'<label>行业</label>\'
            +\'<select class="selectpicker" multiple data-live-search="true"  id="industry">\'
            +\'</select>\'
            +\'</div>\'
            +\'<div class="mui-input-row real-label">\'
            +\'<label>应用</label>\'
            +\'<select class="selectpicker" multiple data-live-search="true" id="apply">\'
            +\'</select>\'
            +\'</div>\';
JS部分

    //行业
    var indusJson = \'\';
    var induAll = \'\';
	function changeIndu() {
        $.ajax({
            url: \'http://ezist.cn/api/industries\',
            type: \'get\',
            dataType: "json",
            data: \'\',
            success: function(data) {
            	console.log(data);
                var datas = data.data;
                var html = \'\';
                $.each(datas,function(index,item) {
                    html += \'<option value="\'+item.id+\'">\'+item.name+\'</option>\';
                });
                $(\'#industry\').html(html);
                $("#industry").selectpicker("refresh");    
				$("#industry").selectpicker("render"); 
				$(\'#industry\').on(\'changed.bs.select\',function(e){
					//选中的value值，会自动添加到数组中
					induAll = $(this).val();
					//转换成json格式的字符串
					indusJson = JSON.stringify(induAll);
					//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
					window.localStorage.setItem(\'Indu\',indusJson);
				});
				//设置默认的选中项，InduSelect是数组[0,1,2]
				$("#industry").selectpicker(\'val\',InduSelect);
            },
            error: function () {
                console.log("数据请求失败");
            }
        })
   }

//应用
    var appliesJson = \'\';
    function changeApp() {
        $.ajax({
            url: \'http://ezist.cn/api/applies\',
            type: \'get\',
            dataType: "json",
            data: \'\',
            success: function(data) {
                var datas = data.data
                var html = \'\';
//                  html = \'<option value="\'+ paramAppIndex +\'">\'+ paramAppVal +\'</option>\'
                $.each(datas, function(index,item) {
                     html += \'<option value="\'+item.id+\'">\'+item.name+\'</option>\';
                });
                $(\'#apply\').append(html);
                $("#apply").selectpicker("refresh");    
				$("#apply").selectpicker("render");  
				$(\'#apply\').on(\'changed.bs.select\',function(e){
					//选中的value值，会自动添加到数组中
					var appliesAll = $(this).val();
					//转换成json格式的字符串
					appliesJson = JSON.stringify(appliesAll);
					//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
					window.localStorage.setItem(\'Appl\',appliesJson);
				});
				$("#apply").selectpicker(\'val\',applySelect);
            },
            error: function () {
                console.log("数据请求失败");
            }
        })
    }