十五、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("数据请求失败");
            }
        })
    }