bootstrap插件bootstrap-select使用demo

時間 2020-05-18

標籤 bootstrap 插件 select 使用 demo 欄目 Bootstarp 简体版

原文原文鏈接

插件bootstrap-select官網 : https://developer.snapappointments.com/bootstrap-select/javascript

bootstrap-select插件: 下拉框查詢搜索示例demophp

html文件：css

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
 6         <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css"/>
 7     </head>
 8     <body>
 9         <!--<select id="slpk" class="selectpicker" multiple title="提示語" data-max-options="5" data-live-search="true" ></select>-->
10         <form action="demo.php" method="get">
11             <div class="form-group">
12                 <label class="col-sm-1 control-label">生肖:</label>
13                 <div class="col-sm-3">
14                     <select id="usertype" name="zodiac[]" class="selectpicker form-control" multiple title="請選擇" data-max-options="5" data-live-search="true" data-size="8">
15                         <option value="0">所有</option>
16                         <option value="1" data-content="<span class='label label-primary'>鼠</span>"></option>
17                         <option value="2">牛</option>
18                         <option value="3" data-content="<span class='label label-success'>虎</span>"></option>
19                         <option value="4">兔</option>
20                         <option value="5" data-content="<span class='label label-info'>龍</span>"></option>
21                         <option value="6">蛇</option>
22                         <option value="7" data-content="<span class='label label-warning'>馬</span>"></option>
23                         <option value="8">羊</option>
24                         <option value="9" data-content="<span class='label label-danger'>雞</span>"></option>
25                         <option value="10">猴</option>
26                         <option value="11" data-content="<span class='label label-primary'>狗</span>"></option>
27                         <option value="12">豬</option>
28                     </select>
29                 </div>
30             </div>
31             <button type="submit" class="btn btn-default">提交按鈕</button>
32         </form>
33     </body>
34     <script src="js/jquery.min.js" type="text/javascript"></script>
35     <script src="js/bootstrap.min.js" type="text/javascript"></script>
36     <script src="js/bootstrap-select.min.js" type="text/javascript"></script>
37     <script type="text/javascript">
38  $(function() { 39  $(".selectpicker").selectpicker('val', '0'); 40  }); 41      </script>
42 </html>

php文件:html

1 <?php 2 $data = $_GET; 3 var_dump($data);

運行效果圖以下：java

示例代碼demo文件下載地址： 點擊下載jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。