2017-08-15 96 views
-3

我正在使用bootstrap-sass,並且我想使用selectpicker進行搜索,但它不起作用!javascript selectpicker不起作用

這是我的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 . 

這是我的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> 

回答

0

在這裏,你有一個工作的例子。我的問題來自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>