javascript selectpicker doesn't work

Question

I'm using bootstrap-sass and i want to use selectpicker for search but it doesn't work !!

this is my 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 .

this is my application.js

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

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

and this is my view

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

score 0 · Answer 1 · answered Aug 15 '17 at 08:11

Here you have a working example. I thing your probleme come from 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 doesn't work

1 Answers1