0

所以，当我做一个：

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

我目前有：

    <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>

但是我必须集成一个 twitter 引导模板，我希望生成的选择看起来尽可能像这样：

<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>

但我不知道该怎么做。

4

2 回答 2

0

f.select 不接受超过四个参数。所以声明 

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

会抛出错误。相反，您可以执行以下操作： 

<%= f.select :categories, CategoriesList.all.collect {|x| [x.category, x.id]}, {},{:multiple => true, :class => "controls"} %>
于 2013-09-06T06:23:19.663 回答
0

选项 1)
首先，将 f.input 拆分为 f.label 和 f.select，使其看起来像：

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

然后用所需的 div 包装它：

<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>

选项 2)
使用twitter-bootstrap-rails gem 来处理样式。

于 2013-07-24T03:55:02.957 回答