bootstrap-select基本用法(上篇)

原创 Laughing  2017-07-26 00:35  阅读 667 次 评论 1 条

bootstrap-select是结合bootstrap使用的一款功能十分强大的下拉框选择插件。可以实现单选、多选、查询、分组以及限制选择个数等多种功能。

安装方法

关于bootstrap-select的安装方法以及更多介绍,大家可以参考这篇文章


单选功能

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-25  
  4.             描述:基本选择  
  5.         -->  
  6.         <div class="form-group">  
  7.         <div class="panel-heading">  
  8.             <span class="glyphicon glyphicon-search">基本选择</span>  
  9.         </div>  
  10.         <div class="panel-body">  
  11.             <select class="selectpicker" id="singleSelect">  
  12.             <option value="0">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.         </select>  
  16.         </div>  
  17.         </div>  

分组

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-25  
  4.             描述:多选  
  5.         -->  
  6.         <div class="form-group">  
  7.         <div class="panel-heading">  
  8.             <span class="glyphicon glyphicon-search">分组</span>  
  9.         </div>  
  10.         <div class="panel-body">  
  11.             <select class="selectpicker" id="singleGroupSelect">  
  12.             <optgroup label="水果">  
  13.             <option value="0">橘子</option>  
  14.             <option value="1">苹果</option>  
  15.             <option value="2">香蕉</option>  
  16.             </optgroup>  
  17.             <optgroup label="蔬菜">  
  18.                 <option value="3">土豆</option>  
  19.                 <option value="4">芹菜</option>  
  20.             </optgroup>  
  21.         </select>  
  22.         </div>  
  23.         </div>  

多选

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-25  
  4.             描述:多选  
  5.         -->  
  6.         <div class="panel-heading">  
  7.             <span class="glyphicon glyphicon-search">多选</span>  
  8.         </div>  
  9.         <div class="panel-body">  
  10.             <select class="selectpicker" id="multipleGroupSelect" multiple="true">  
  11.             <optgroup label="水果">  
  12.             <option value="0">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.             </optgroup>  
  16.             <optgroup label="蔬菜">  
  17.                 <option value="3">土豆</option>  
  18.                 <option value="4">芹菜</option>  
  19.             </optgroup>  
  20.         </select>  
  21.         </div>  
  22.         </div>  
获取选中的值
  1. //多选  
  2.         $("#multipleGroupSelect").change(function(){  
  3.             alert($("#multipleGroupSelect").val());  
  4.         });  
返回值是以,分隔的字符串

查询

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-26  
  4.             描述:data-tokens设置查询关键字,例如下面的查询橘子,通过查询条件“查询橘子”可以查询到橘子  
  5.         -->  
  6.         <div class="panel-heading">  
  7.             <span class="glyphicon glyphicon-search">查询</span>  
  8.         </div>  
  9.         <div class="panel-body">  
  10.             <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" multiple="true">  
  11.             <optgroup label="水果">  
  12.             <option data-tokens="查询橘子" value="0">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.             </optgroup>  
  16.             <optgroup label="蔬菜">  
  17.                 <option value="3">土豆</option>  
  18.                 <option value="4">芹菜</option>  
  19.             </optgroup>  
  20.         </select>  
  21.         </div>  
  22.         </div>  

设置最大选中数目

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-26  
  4.             描述:设置最大选中条数  
  5.         -->  
  6.         <div class="panel-heading">  
  7.             <span class="glyphicon glyphicon-search">设置最大选中条数</span>  
  8.         </div>  
  9.         <div class="panel-body">  
  10.             <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
  11.             <optgroup label="水果">  
  12.             <option data-tokens="查询橘子" value="0">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.             </optgroup>  
  16.             <optgroup label="蔬菜">  
  17.                 <option value="3">土豆</option>  
  18.                 <option value="4">芹菜</option>  
  19.             </optgroup>  
  20.         </select>  
  21.         </div>  
  22.         </div>  

设置没有选中的显示内容

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-26  
  4.             描述:设置没有选中项的默认值  
  5.         -->  
  6.         <div class="panel-heading">  
  7.             <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span>  
  8.         </div>  
  9.         <div class="panel-body">  
  10.             <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
  11.             <optgroup label="水果">  
  12.             <option data-tokens="查询橘子" value="0">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.             </optgroup>  
  16.             <optgroup label="蔬菜">  
  17.                 <option value="3">土豆</option>  
  18.                 <option value="4">芹菜</option>  
  19.             </optgroup>  
  20.         </select>  
  21.         </div>  
  22.         </div>  

设置每一项的查询关键字

  1. <!--  
  2.             作者:iamlisen@163.com  
  3.             时间:2017-07-26  
  4.             描述:通过设置option的title,设置每一个选中项选中后显示的内容  
  5.         -->  
  6.         <div class="panel-heading">  
  7.             <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span>  
  8.         </div>  
  9.         <div class="panel-body">  
  10.             <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true">  
  11.             <optgroup label="水果">  
  12.             <option data-tokens="查询橘子" value="0" title="你选择了橘子">橘子</option>  
  13.             <option value="1">苹果</option>  
  14.             <option value="2">香蕉</option>  
  15.             </optgroup>  
  16.             <optgroup label="蔬菜">  
  17.                 <option value="3">土豆</option>  
  18.                 <option value="4">芹菜</option>  
  19.             </optgroup>  
  20.         </select>  
  21.         </div>  
  22.         </div>  

历史上的今天:

本文地址:https://www.lisen.me/the-bootstrap-select-basic-usage-last.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情