ブートストラップスタイルを選択して検索が機能しない

Question

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

は、なぜそれが機能していない：私は、ブートストラップ・セレクトのdivのために1.12.4 @私のコードを微インストールインストールされ選択NPM使用してそれをインストールし、それを動作させるように見えることはできませんか？私は何を逃したのですか？

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

Answer 2

理由は、bootstrap-selectを使用するための依存関係のJavaスクリプトファイルを追加していないためです。ほとんどのブートストラップのdropdown.jsコンポーネント。

次のスクリプトを含めて実行することができます。

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