軌，集合選擇風格

我想要的風格集合中選擇沒有任何的運氣。目前，我正在撿這樣的meal_size：軌，集合選擇風格

= f.input :meal_size_id, collection: @meal.meal_sizes

產生

<div class="form-group select optional order_meal_size_id"> 
<select class="select optional form-control" placeholder="Meal size" name="order[meal_size_id]" id="order_meal_size_id"> 
    <option value=""></option> 
    <option value="10">Small</option> 
    <option value="11">Medium</option> 
    <option value="12">Large</option> 
</select> 
</div>

然而，我想要的是在選項標籤內部有一個完整的div，而不僅僅是一些純文本。另外，我希望將選項列出，而不是在下拉列表中顯示。任何想法如何實現這一點：？謝謝！

編輯：以前，我的meal_sizes是使用jquery挑選的。這樣產生的div：

= div_for(meal_size, class: "col-xs-4") 
    .bold 
    = meal_size.name 
    .prices 
    = meal_size.price 
    .short_description 
    = meal_size.description

而且我有這個代碼把選定在一個隱藏字段

$('.meal_size').click -> 
    html_id = $(this).attr('id') 
    meal_size_id = html_id.split('_')[2] 
    $("#order_meal_size_id").val(meal_size_id); 
    return

我想，這樣採摘時他們有同一個選項我沒有使用jQuery。

來源

2016-06-29 Kristiyan Tsvetanov

在...我想要的是有一個整體的DIV在選項標籤內

據我所知，任何其他html標籤內的選項標籤是無效的。

此外，我想要列出的選項，而不是在下拉列表中顯示。任何想法如何完成

在html中選擇標籤有一個大小屬性，例如，它顯示選擇標籤中的前n個選項。您可以在rails中編寫一些代碼，使size屬性等於下拉列表中顯示的集合的數量。

例如，您可以將{ size: @meal.meal_sizes.count }添加到select標籤的html選項散列中。

<%= f.collection_select(:meal_size_id, @meal.meal_sizes, :id, :name, {:prompt => false}, { class: "form-control", size: @meal.meal_sizes.count }) %>

來源

2016-06-29 09:16:21 hypern

首先，我做了我的選項作爲divs並把選定的使用jQuery的隱藏字段。一切都很好。後來，有人告訴我，使用jQuery是不好的，我應該使用收集的輸入。如果一個div inse選項標籤無效，我會回到previus方法... –

看看[html5規範]（https://dev.w3.org/html5/spec-preview/the-option-element。 html＃the-option-element），它的列表表明內容模型只是'文本'。這意味着在選項標籤內只允許使用文本。 – hypern

<div class="form-group"> 
    <%= f.label :meal_sizes, class: "col-md-4 control-label" %> 
    <div class="col-md-4"> 
    <%= collection_select(:meal_sizes, @meal.meal_sizes, :id, :name, {:prompt => false}, class: "form-control") %> 
    </div> 
</div>

來源

2016-06-29 09:02:11

感謝，但仍顯示輸入的下拉列表：/ –

你能取悅也提到你預期的HTML ...它會使畫面有點更清晰 –

我更新我的問題與我期望的div裏面的選項:) –

你應該這樣做： - 讓你的方法（meal_sizes）像回報，並通過它收集

arr = ["<div>Small</div>","<div>Medium</div>","<div>Large</div>"] 

f.input :meal_size_id, collection: arr

來源

2016-06-29 09:03:04 Sunny

軌，集合選擇風格

回答

相關問題