Bootstrap's multiple selectpicker using Ruby on Rails
<p>I'm new to Ruby on Rails, and I'm trying to implement Silvio Moreto's <a href="https://silviomoreto.github.io/bootstrap-select/" rel="nofollow">bootstrap-select plugin</a> in my web-page. I would really appreciate any help.</p>

<p>My Rails version is 4.0.4, and I'm using turbolinks-2.5.3</p>

<p>I already have everything I need installed, but I don't know how to embed my current .erb code into the syntax needed for the selectpicker multiple class to work.</p>

<p>Additionally, I have some other style classes I need to maintain so my page layout remains formatted the way it is.</p>

<p>Here is an example on how the selectpicker should be implemented:</p>

<pre><code>&lt;select class="selectpicker" multiple&gt;
  &lt;option&gt;Mustard&lt;/option&gt;
  &lt;option&gt;Ketchup&lt;/option&gt;
  &lt;option&gt;Relish&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>and this is the part of my code I want to implement it on. It already works, but the styling looks horrible:</p>

<pre><code>&lt;%= 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 "%&gt;
</code></pre>

<p>This is the HTML:</p>

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

<p>This is the code for the empty drop-down menu generated on top of the select-tag, which is far more incomprehensible (to me, at least):</p>

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