bootstrap-select插件的使用、注意事项、功能实现等

最新推荐文章于 2024-05-15 00:21:36 发布

Demonor_

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量3k

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/A13432421434/article/details/80988280

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Demo（下载，下载，下载，集体看这里）

教程：https://blog.csdn.net/qq_37677519/article/details/78143522

官方文档： http://silviomoreto.github.io/bootstrap-select/examples/
注意事项1：该插件的单选框不能设置title，也就是鼠标停在option上面，title失效 https://blog.csdn.net/ya_1249463314/article/details/80665302
解决方案：
1.在《select title="请选择用户" 》
2.第一个option设置值《option value="0" 》请选择用户《/option》

注意事项2：该插件需要 bootstrap-3.3.7 极其以后的版本, 否则的话，功能不会完全展示，如勾选option，引入3.3.7之前版本的bootstrap是没有显示打勾的。

注意事项3：该插件需要结合HTML5，至于怎么区分是不是HMTL5，很简单，在html文本开头部分（<html>标签之前）写<!DOCTYPE html>即视为HTML5，开头部分若不写DOCTYPE或者是<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">是为非HTML5 ,所以，html开头部分需要更改为<!DOCTYPE htm>，若非HTML5引用该插件会有一些问题存在，如下拉框间距过小，勾选按钮不显示等系列问题。

注意事项4：通过js拼接select的option并设置默认选中某几个option，
若不是使用js拼接option的话，在jsp设置使用selected="selected"有效，但若使用该插件在js设置《option selected="selected"》是无效的，解决方案如下
相关连接：
https://www.cnblogs.com/mgzy/p/5755915.html
https://blog.csdn.net/princeluan/article/details/69054456
案例：

$.ajax({
      type: "POST",
      url: "cascade.jsp?method=3",
      data: {
            fuserId:$(this).val()//传参
      },
      timeout: 60000, // 设置超时时间 1000ms = 1s
      dataType: "json",
      beforeSend: function (xhr) {
            $("#loading_").css("display","block"); // 数据加载成功之前，使用loading组件（把loading.gif显示出来即可）
      },
      success: function(data) {
           if(data.flag){
                var list = JSON.parse(data.list);
                 var roleIds = new Array();//1.new 一个数组
                for(var j in list){
                     var role = list[j];//Dept对象
                     //勾选用户所属的组
                     if(role.userRoleId==role.allRoleId){
                          if(role.f_useOrNot!=1&&role.f_useOrNot!=""){
                               select.append('《option disabled="disabled" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                          }else{
                               //设置selected="selected"是无效的，所以设置selected="selected"就是无用功
                               //select.append('《option selected="selected" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                               select.append('《option value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                                roleIds.push(role.allRoleId);//2.将需要选中的option的value值push到数组
                          }
                      }
                      //拼接其他组，不勾选
                      else{
                           if(role.f_useOrNot!=1&&role.f_useOrNot!=""){
                                select.append('《option disabled="disabled" value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                           }else{
                                select.append('《option value="'+role.allRoleId+'"》'+role.roleName+'《/option》');
                           }
                      }
            }//for循环结束

$('#sel_userGroup').selectpicker('val', roleIds); //3.bootstrap插件设置选中（如 <select id="sel_userGroup" ></select> )

           $('#sel_userGroup').selectpicker('refresh'); //4.刷新selectoption状态
           $("#loading_").css("display","none"); //拼接完成，关闭加载插件（我这里的#loading_是一张gif图片，可以自行下载素材，加载的时候，把加载中的图片显示出来即可）
           }else{
                alert("Error,参数错误【fuserId】");
                $("#loading_").css("display","none");
                return;
           }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown,xhr) {
           if(textStatus=="timeout"){
                alert(" 请求超时，请重新加载")
                $("#loading_").css("display","none");return;
           }else{
                alert("XMLHttpRequest.status:"+XMLHttpRequest.status+"\n"+"XMLHttpRequest.readyState:"+XMLHttpRequest.readyState+"\n" +"textStatus:"+textStatus);
                $("#loading_").css("display","none");return //
           }
      }
      })

例1.选择/取消选择所有选项

例1代码：

<select class="selectpicker" multiple data-actions-box="true">
  <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option> 
</select>

例2.普通单选

例2代码：

<select class="selectpicker">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

例3.带搜索单选

例3代码：

<select class="selectpicker" data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

例4.多选：

例4代码：

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

例5.包含组的多选：

例5代码：

<div style="width:220px;height:35px;"> <!-- select父div宽度决定select插件宽度 -->
<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="广东省">
                <option value="1">广州市</option>
                <option value="2">深圳市</option>
                <option value="3">珠海市</option>
         </optgroup>   
          <optgroup label="广西">
                  <option value="1">南宁市</option>
                  <option value="2">柳州</option>
                  <option value="3">桂林市</option>
           </optgroup>  
           <optgroup label="山东">
                   <option value="1">烟台</option>
                   <option value="2">青岛</option>
                   <option value="3">济南</option>
             </optgroup>                          
</select>
</div>

例6：带样式选择

例6代码：

<select class="form-control selectpicker" data-style="btn-primary" title="请选择省份" multiple>
                        <option data-content="<span class='label label-success'>广东省</span>">广东省</option>    
                        <option data-content="<span class='label label-info'>广西省</span>">广西省</option>  
                        <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>  
                        <option data-content="<span class='label label-danger'>山东省</span>">山东省</option>                        
</select>

其中：data-type有几种类型，分别是：

data-style="btn-success" 绿色

data-style="btn-primary" 蓝色

data-style="btn-info" 浅蓝

data-style="btn-warning" 黄色

data-style="btn-danger" 红色

描述的差不多了，该插件本人考虑过很多东西，如若您有什么想实现却想不到方法的可以联系本人

（邮箱：2225629171@qq.com），我知道的话肯定会告诉你的.。希望以上能帮到您。

Demonor_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-select插件的使用、注意事项、功能实现等

demo（下载）教程：https://blog.csdn.net/qq_37677519/article/details/78143522官方文档：http://silviomoreto.github.io/bootstrap-select/examples/注意事项1：该插件的单选框不能设置title，也就是鼠标停在option上面，title失效 https://blog.csdn.net/y...
复制链接

扫一扫