Question

我正在尝试设计一个没有任何运气的集合选择...目前，我正在选择这样的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。

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

你应该使用这个： - 使你的方法（meal_sizes）像返回一样，并将其传递给集合

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

f.input :meal_size_id, collection: arr

Answer 3

...我想要的是在选项标签
中包含一个完整的div

据我所知，在选项标签中包含任何其他html标签是无效的。

另外，我希望列出选项，而不是显示在落下。关于如何实现这一目标的任何想法

html中的Select标签有一个size属性，例如，它显示select标签中的前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 }) %>

Rails，集合选择样式

3 个答案: