Question

我正在尝试将Bootstrap-Select与搜索功能结合使用。我似乎无法让它工作，我使用npm install bootstrap-select安装它安装精细@ 1.12.4我的代码为div和选择是：

<div class="form-group">
 <select class="selectpicker" id="sel" name="manufacturer" onchange="man()" data-live-search="true">
  <option selected>Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>                             
  <option value="other">Other</option>
 </select>
</div>

为什么不起作用？我错过了什么类型？

Answer 1

这是你需要做的事情

＆＃13;

$(function() {
  $('.selectpicker').selectpicker();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />




<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body">
          <form>
            <div class="form-group row">
              <label for="" class="col-sm-2 form-control-label">Country</label>
              <div class="col-sm-10">
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                <option data-tokens="china">China</option>
                <option data-tokens="malayasia">Malayasia</option>
                <option data-tokens="singapore">Singapore</option>
                </select>

              </div>
            </div>
          </form>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

＆＃13;

Answer 2

原因是您没有添加依赖java脚本文件以使用bootstrap-select。主要是Bootstrap的dropdown.js组件。

您可以尝试包含以下脚本并执行。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap选择样式并搜索不起作用

2 个答案: