Question

我是Ruby on Rails的新手，我正在尝试在我的网页中实施Silvio Moreto的bootstrap-select plugin。我真的很感激任何帮助。

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

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

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

以下是有关如何实施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>

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

<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之后出现

Bootstrap使用Ruby on Rails的多个selectpicker

1 个答案: