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);
运行效果图如下: