sur mesure choix multiple

Question

Donc, quand je fais:

<%= f.input :categories, :required => false, :as => :select, :input_html => {:size => 29, :multiple => true}, :collection => CategoriesList.all %> 

J'ai actuellement:

<div class="control-group"> 
    <div class="select input optional" id="filters_categories_input"> 
    <input name="filters[categories][]" type="hidden" value=""> 
    <label class=" control-label" for="filters_categories">Categories</label> 
    <input name="filters[categories][]" type="hidden" value=""> 
    <select id="filters_categories" multiple="multiple" name="filters[categories][]" size="29"><option value="133">Bathroom Remodeling</option> 
     <option value="134">Cabinets &amp; Carpenters</option> 
     <option value="136">Demolition</option> 
     <option value="137">Drywall</option> 
     <option value="139">Electricians</option> 
     <option value="141">Fences, Doors &amp; Gates</option> 
     <option value="143">Flooring</option> 
     <option value="144">General Contractors</option> 
     <option value="145">Heating &amp; Air Conditioning</option> 
     <option value="146">Kitchen Remodeling</option> 
     <option value="147">Landscaping</option> 
     <option value="149">Painters</option> 
     <option value="150">Plumbers</option> 
     <option value="151">Roofing</option> 
     <option value="152">Swimming Pools</option> 
     <option value="154">Windows &amp; Blinds</option> 
     <option value="14377">Architects</option> 
     <option value="14379">Alarms, Audio &amp; Video</option> 
     <option value="14381">Interior Designers</option> 
     <option value="14382">Pool Services</option> 
     <option value="36608">Cleaning Services</option> 
     <option value="37012">Commercial Contractors</option> 
     <option value="37013">Custom Home Builders</option> 
     <option value="37014">Handymen</option> 
     <option value="37045">Locksmiths</option> 
     <option value="37074">Home Inspectors</option> 
     <option value="37080">Hauling Services</option> 
     <option value="37086">Telecommunications</option> 
     <option value="40301">Concrete</option> 
     <option value="55555">Remodeling</option></select> 
</div> 
</div> 

Mais je dois intégrer un twitter modèle bootstrap et je voudrais que la sélection généré pour regarder comme autant que possible comme ceci:

<div class="control-group"> 
<label class="control-label">Multiple Select input</label> 
<div class="controls">         <select multiple>         <option>First option</option>          <option selected>Second option</option>        <option>Third option</option> 
<option>Fourth option</option> 
<option>Fifth option</option> 
<option>Sixth option</option> 
<option>Seventh option</option> 
<option>Eighth option</option> 
</select> 
</div> 
</div> 

Mais je n'ai aucune idée de comment le faire.

Answer 1

Option 1)
Tout d'abord, diviser votre f.input en f.label et f.select, afin qu'il ressemblerait à ceci:

<%=f.label "Multiple Select Input"%> 
<%= f.select :categories, CategoriesList.all.collect {|x| [x.category, x.id]}, {}, :multiple => true %> 

envelopper ensuite avec la div nécessaire:

<div class="control-group"> 
<%=f.label "Multiple Select Input", :class => "control-label"%> 
    <%= f.select :categories, CategoriesList.all.collect {|x| [x.category, x.id]}, {}, :multiple => true, :class => "controls" %> 
</div> 

Option 2)
utilisation twitter-bootstrap-rails ge m qui prendrait soin du style. F.select n'accepte pas plus de quatre arguments.

Answer 2

f.select Ainsi, l'instruction

<%= f.select :categories, CategoriesList.all.collect {|x| [x.category, x.id]}, {},:multiple => true, :class => "controls" %> 

provoquera une erreur. Au lieu de cela, vous pouvez faire quelque chose comme ci-dessous:

<%= f.select :categories, CategoriesList.all.collect {|x| [x.category, x.id]}, {},{:multiple => true, :class => "controls"} %>