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'); //动态绑定数据一定要加这句话否则没用看下图;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Select2是一个基于jQuery的自定义下拉选择插件,可以让用户在一个优雅的界面中选择数据。 树形下拉Bootstrap Select2的一个特殊功能,它允许我们将数据以树形结构展示在下拉框中,方便用户快速选择和搜索。 使用Bootstrap Select2树形下拉,首先需要引入Select2的库文件和相关样式。然后在HTML中创建一个下拉菜单的元素,并为其添加一个自定义的class。接下来,需要通过JavaScript来配置Select2插件。 配置Select2的时候,我们需要同时传入数据源以及一些额外的配置选项。对于树形下拉的数据源,我们可以使用一个以JSON对象的形式表示的树状结构。 例如,下面是一个简单的JSON对象,表示一个带有"节点1"和"节点2"的树形结构: { "id": 1, "text": "节点1", "children": [ { "id": 2, "text": "节点2" } ] } 在配置Select2的时候,我们可以用ajax方法获取这个JSON数据,并将其传入"data"选项中。 除了数据源外,我们还可以通过配置选项调整下拉框的外观和功能。例如,可以启用搜索功能,使用户能够在下拉框中快速查找节点。 最后,我们需要通过JavaScript来初始化Select2插件并将其应用到我们创建的下拉菜单元素上。 在使用过程中,用户可以通过点击下拉框,展开或折叠树形结构。他们可以通过输入关键字来搜索节点,并选择他们想要的节点。 总结起来,Bootstrap Select2树形下拉是一个强大的工具,可以方便地在界面上展示和搜索树状数据。这个功能可以通过合适的JSON数据源和一些配置选项来实现。同时,用户可以通过点击和搜索来选择他们想要的节点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值