Rails，集合选择样式

Question

I am trying to style a collection select without any luck... Currently, I am picking a meal_size like this:

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

Which generates

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

However, what I want is to have a whole div inside the option tag, and not just some plain text. Also, I would like the options to be listed, rather than shown in a dropdown. Any ideas on how to accomplish that :? Thank you!

Edit: Previously, my meal_sizes were picked using jquery. The divs were generated like this:

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

And I had this code to put the selected ones in a hidden field

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

I would like to have the same as an option so that when picking them I am not using jquery.

Answer 1

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

Answer 2

You should Use This:- Make your method(meal_sizes) as return like and pass it in the collection

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

f.input :meal_size_id, collection: arr

Answer 3

...what I want is to have a whole div inside the option tag

As far as I know, it is invalid to have any other html tags inside of an option tag.

Also, I would like the options to be listed, rather than shown in a dropdown. Any ideas on how to accomplish that

Select tag in html has a size attribute, eg which shows the first n options in the select tag. You could write some code in rails to make the size attribute equal to the count of the collection you are displaying in the drop down list.

For example, you could add { size: @meal.meal_sizes.count } to the html options hash of the select tag.

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