可搜索多选下拉列表插件

来源:互联网 发布:银河历险记3mac破解版 编辑:程序博客网 时间:2024/04/30 01:51

可搜索多选下拉列表插件

参考:http://blog.csdn.net/xb12369/article/details/50999265


<html>  <head>      <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title>      <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>      <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>        <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">        <!-- 3.0 -->      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>      <!-- 2.3.2      <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">      <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>      -->      <script type="text/javascript">          $(window).on('load', function () {              $('.selectpicker').selectpicker({                  'selectedText': 'cat'                  'maximumSelectionLength' :1            });              // $('.selectpicker').selectpicker('hide');          });      </script>  </head>  <body>      <label for="id_select">多选择下拉框(搜索)</label>      <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">          <option>cow</option>          <option>bull</option>          <option class="get-class" disabled>ox</option>          <optgroup label="test" data-subtext="another test" data-icon="icon-ok">              <option>ASD</option>              <option selected>Bla</option>              <option>Ble</option>          </optgroup>      </select>      <div class="container">          <form class="form-horizontal" role="form">              <div class="form-group">                  <label for="bs3Select" class="col-lg-2 control-label">单选择下拉(搜索)</label>                  <div class="col-lg-10">                      <select id="bs3Select" class="selectpicker show-tick form-control"  data-live-search="true">                          <option>cow</option>                          <option>bull</option>                          <option class="get-class" disabled>ox</option>                          <optgroup label="test" data-subtext="another test" data-icon="icon-ok">                              <option>ASD</option>                              <option selected>Bla</option>                              <option>Ble</option>                          </optgroup>                      </select>                  </div>                </div>          <form>      </div>  </body>  </html>  
原创粉丝点击