Question

我正在使用bootstrap-sass，我想使用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>

Answer 1

这里有一个有效的例子。我的问题来自于js / css import。

$('.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>

javascript selectpicker不起作用

1 个答案: