javascript选择器不起作用答案

【问题标题】：javascript selectpicker doesn't workjavascript选择器不起作用
【发布时间】：2017-08-15 07:43:02
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-sass

【解决方案1】：

这里有一个工作示例。我觉得你的问题来自 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>

【讨论】：