javascript selectpickerが機能しません

Question

私はbootstrap-sassを使用していますが、selectpickerを検索に使用したいのですが、動作しません!!

これは、これは私のapplication.js

*= require_tree . 
*= require_self 
*= require bootstrap-datepicker3 
*/ 

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

であり、これはあなたが作業例を持っている私の見解ここ

<div class="container"> 
    <div class="row"> 
    <h2>Bootstrap-select example</h2> 
    <hr /> 
    </div> 

    <div class="row-fluid"> 
    <select class="selectpicker" data-show-subtext="true" data-live-search="true"> 
     <option data-subtext="Rep California">Tom Foolery</option> 
     <option data-subtext="Sen California">Bill Gordon</option> 
     <option data-subtext="Sen Massacusetts">Elizabeth Warren</option> 
     <option data-subtext="Rep Alabama">Mario Flores</option> 
     <option data-subtext="Rep Alaska">Don Young</option> 
     <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option> 
    </select> 
    </div> 
</div> 

Answer 1

です。私application.js

//= require rails-ujs 
//= require turbolinks 
//= require jquery3 
//= require jquery_ujs 
//= require jquery.min.js 
//= require bootstrap.min.js 
//= require bootstrap-datepicker 
//= require_tree . 

です私はあなたの問題はjs/cssのインポートから来るものです。

$('.selectpicker').selectpicker({ 
 
    style: 'btn-info', 
 
    size: 4 
 
});

<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- Bootstrap JS --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- Bootstrap CSS --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Bootstrap-Select CSS --> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/> 
 

 
<!-- Bootstrap-Select JS --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <h2>Bootstrap-select example</h2> 
 
    </div> 
 

 
    <div class="row-fluid"> 
 
    <select class="selectpicker" data-show-subtext="true" data-live-search="true"> 
 
     <option data-subtext="Rep California">Tom Foolery</option> 
 
     <option data-subtext="Sen California">Bill Gordon</option> 
 
     <option data-subtext="Sen Massacusetts">Elizabeth Warren</option> 
 
     <option data-subtext="Rep Alabama">Mario Flores</option> 
 
     <option data-subtext="Rep Alaska">Don Young</option> 
 
     <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option> 
 
    </select> 
 
    </div> 
 
</div>