随笔- 105 文章- 0 评论- 12 阅读- 26万

十五、bootstrap-select的使用方法

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

需要的css和js

1 2	`<link rel="stylesheet"` `href="css/bootstrap-select.min.css"` `/>` `<link rel="stylesheet"` `href="css/bootstrap.min.css"` `/><br><br>`

1 2	`<script src="js/jquery-1.11.1.js"></script><br><script src="js/bootstrap.min.js"></script>` `<script src="js/bootstrap-select.min.js"></script>`

html中的代码：

title为默认显示的内容

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

1	`以下两句话必不可少`

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

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

选中的value的值

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

默认选中赋值

1	`$("对象").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>';<br>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("数据请求失败");
            }
        })
    }