轨，集合选择风格

我想要的风格集合中选择没有任何的运气。目前，我正在捡这样的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

轨，集合选择风格

回答

相关问题