使用 Ruby on Rails 引导多个选择器

Question

我是 Ruby on Rails 的新手，我正在尝试在我的网页中实现 Silvio Moreto 的 bootstrap-select plugin。非常感谢任何帮助。

我的 Rails 版本是 4.0.4，我使用的是 turbolinks-2.5.3

我已经安装了我需要的所有东西，但我不知道如何将我当前的 .erb 代码嵌入到 selectpicker 多类工作所需的语法中。

此外，我还需要维护一些其他样式类，以便我的页面布局保持原样。

下面是一个关于如何实现选择器的示例：

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

这是我想要实现它的代码的一部分。它已经可以工作了，但是样式看起来很糟糕：

<%= select_tag :portafolio_id,
                  options_from_collection_for_select(current_user.portafolios, :id, :nombre,
                  params[:portafolio_id]), 
                  multiple: true, size: '8%', class: "form-control input-sm "%>

这是 HTML：

<select class="form-control input-sm selectpicker" id="portafolio_id" multiple="multiple" name="portafolio_id[]" size="8">
<option value="68">ABC</option>
<option value="11">Demo 1</option>
<option value="66">Demo 2</option>
<option value="185">MEXICO</option>
<option value="106">Peru</option>
<option value="184">Peru gob</option>
<option value="585">prueba</option>
<option value="961">temp-h0zul</option>
</select>

这是在选择标签顶部生成的空下拉菜单的代码，这更难以理解（至少对我来说）：

<div class="btn-group bootstrap-select show-tick form-control input-sm">
<button type="button" class="btn dropdown-toggle form-control selectpicker btn-default" data-toggle="dropdown" data-id="portafolio_id" title="Nothing selected">
<span class="filter-option pull-left">Nothing selected</span>&nbsp;<span class="caret">
</span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>
ABC</span>">
<span class="text">ABC</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>
Demo 1</span>">
<span class="text">Demo 1</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="2">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Demo 2</span>">
<span class="text">Demo 2</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="3">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>MEXICO</span>">
<span class="text">MEXICO</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="4">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Peru</span>">
<span class="text">Peru</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="5">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Peru gob</span>">
<span class="text">Peru gob</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="6">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>prueba</span>">
<span class="text">prueba</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
<li data-original-index="7">
<a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>temp-h0zul</span>">
<span class="text">temp-h0zul</span>
<span class="glyphicon glyphicon-ok check-mark">
</span>
</a>
</li>
</ul>
</div>
</div>

Answer 1

需要将selectpicker添加到select_tag的类中

<%= select_tag :portafolio_id,
  options_from_collection_for_select(current_user.portafolios, :id, :nombre,
  params[:portafolio_id]), 
  multiple: true, size: '8%', class: "form-control input-sm selectpicker"%>

如果你使用 turbolinks，我也使用这个 javascript 来重新激活 selectpicker

$(document).on('ready page:load', function() {
  $('*:not(.bootstrap-select) > .selectpicker').selectpicker('refresh');
}

请注意，对于 turblinks 5+ 的用户，回调应该改为 ready turbolinks:load

另外，请确保您有

//= require bootstrap-select

在你的 application.js 中，它应该在 bootstrap/jquery 之后