bootstrap插件bootstrap-select使用demo
插件bootstrap-select官网 : https://developer.snapappointments.com/bootstrap-select/
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" 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文件:
1 <?php 2 $data = $_GET; 3 var_dump($data);
运行效果图如下：
示例代码demo文件下载地址 ： 点击下载
