bootstrap插件bootstrap-select使用demo

bootstrap-select插件: 下拉框查询搜索示例demo

html文件：

 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" >
15                         <option value="1" data-content="<span class='label label-primary'>鼠</span>"></option>
16                         <option value="2">牛</option>
17                         <option value="3" data-content="<span class='label label-success'>虎</span>"></option>
18                         <option value="4">兔</option>
19                         <option value="5" data-content="<span class='label label-info'>龙</span>"></option>
20                         <option value="6">蛇</option>
21                         <option value="7" data-content="<span class='label label-warning'>马</span>"></option>
22                         <option value="8">羊</option>
23                         <option value="9" data-content="<span class='label label-danger'>鸡</span>"></option>
24                         <option value="10">猴</option>
25                         <option value="11" data-content="<span class='label label-primary'>狗</span>"></option>
26                         <option value="12">猪</option>
27                     </select>
28                 </div>
29             </div>
30             <button type="submit" class="btn btn-default">提交按钮</button>
31         </form>
32     </body>
33     <script src="js/jquery.min.js" type="text/javascript"></script>
34     <script src="js/bootstrap.min.js" type="text/javascript"></script>
35     <script src="js/bootstrap-select.min.js" type="text/javascript"></script>
36     <script type="text/javascript">
37         $(function() {
38             $(".selectpicker").selectpicker({
39                 countSelectedText: function(){}
40             });
41         });
42        function selectValue() {
43                //获取选择的值
44             alert($('#usertype').selectpicker('val'));
45         }
46      </script>
47 </html>

php文件:

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

运行效果图如下：

bootstrap插件bootstrap-select使用demo

猜你喜欢