jquery - Bootstrap 选择样式和搜索不起作用

Question

我正在尝试使用Bootstrap-Select具有搜索功能。我似乎无法让它工作，我使用 npm install bootstrap-select 安装了它，它安装得很好@1.12.4 我的 div 和 select 代码是:

<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

这就是你需要做的

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

<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 -->