下拉列表插件bootstrap-select使用实例

网页实例 http://www.jq22.com/yanshi302

使用bootstrap-select插件来实现下来菜单搜索匹配功能，如图

实现代码如下

<html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.min.css">
    
    <script src="jquery-3.1.0.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>

    
    </head>
    <body>
  
    <form class="form-inline">
    <div class="form-group">
      <label class="col-md-1 control-label" for="lunch">Lunch:</label>
    </div>
    <div class="form-group">
      <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
        <option>Hot Dog, Fries and a Soda</option>
        <option>Burger, Shake and a Smile</option>
        <option>Sugar, Spice and all things nice</option>
         <option>中国</option>
        <option>美国</option>
        <option>日本</option>
        <option>Baby Back Ribs</option>
        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
      </select>
    </div>
  </form>
  
    </body>
</html>

步骤：

1.导入相关的js和css文件，可自行下载

bootstrap-select：http://silviomoreto.github.io/bootstrap-select/

bootstrap:http://v3.bootcss.com/

JQuery:http://jquery.com/

2.设置<select></select>的属性

class="selectpicker" data-live-search="true"

posted @ 2016-08-31 16:35  YangJavaer  阅读(19498)  评论(4)  编辑  收藏  举报