zoukankan      html  css  js  c++  java
  • bootstrap select下拉框模糊搜索和动态绑定数据解决方法

    此方法适合后台一次性返回所有数据好了废话不多说直接上代码;

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap-select test page</title>

    <meta charset="utf-8">
    //代码自己下载
    <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="dist/css/bootstrap-select.css/">

    <style>
    body {
    padding-top: 70px;
    }
    </style>

    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="dist/js/bootstrap-select.js"></script>
    </head>
    <body>
    <form class="form-horizontal" role="form">
    <div class="form-group">
    <label for="basic" class="col-lg-2 control-label">"Basic" (liveSearch enabled)</label>
    <div class="col-lg-4">
    <select id="basic" class="selectpicker show-tick form-control" data-live-search="true">
    <option>cow</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull差</option>
    <option data-subtext="option subtext">bull2</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull</option>
    <option data-subtext="option subtext">bull</option>
    </select>
    </div>
    </div>
    </form>
    $(".selectpicker" ).selectpicker('refresh'); //动态绑定数据一定要加这句话否则没用看下图;

    效果如图

    
    
    </body>
    </html>
  • 相关阅读:
    oracle linux 7.3 dtrace 安装
    ubuntn 内核升级到LINUX v4.11.8:
    ubuntu上安装systemtap
    ubuntu systemtap-sdt-dev
    ubuntu 内核调试符号 网址
    apt-get和apt-cache命令实例展示
    软件包管理 rpm yum apt-get dpkg
    让VIM支持Python2 by update-alternatives
    在Ubuntu中通过update-alternatives切换软件版本
    Ubuntu 11.04安装GCC 4.6.1
  • 原文地址:https://www.cnblogs.com/zou1234/p/7891714.html
Copyright © 2011-2022 走看看