Rails Formtastic:向选项标签添加“data-”字段

I have:

我有:

form.input :duration, as: select, collection: {}

I need:

我需要:

<option value="" data-price="XXX"></option>

Rails does not support HTML5 data attributes for the option tag. Formtastic suggests to create a helper method for this.

Rails不支持选项标签的HTML5数据属性。Formtastic建议为此创建一个助手方法。

Formtastic readme describes how to extend input tags. However, in select_input.rb I can't find any method which would affect the option tag. So, how do I do this?

Formtastic readme描述了如何扩展输入标签。然而,在select_input。我找不到任何会影响选项标签的方法。那么，我该怎么做呢?

Also, I found enhanced_select gem which does exactly what I need, but I am not able to make it work with formtastic.

此外，我还找到了强化d_select gem，它完全满足我的需要，但我无法使它与formtastic一起工作。

3 个解决方案

#1

Actually rails does support adding any kind of html tag to options. Usually you would have:

实际上，rails支持向选项添加任何类型的html标记。通常你会:

options_for_select( [['First', 1], ['Second', 2]] )

which would give you

这将给你

<option value="1">First</option>
<option value="2">Second</option>

If you add a hash into the arrays for each option the hash keys/values will be added as HTML attribute to the option, e.g.

如果为每个选项在数组中添加一个散列，那么散列键/值将作为HTML属性添加到该选项中，例如。

options_for_select( [['First', 1, {:'data-price' => 20}],
                     ['Second', 2, {:'data-price' => 30}]] )

will produce the required tags:

将产生所需的标签:

<option value="1" data-price="20">First</option>
<option value="2" data-price="30">Second</option>

#2

Assuming you have a model called Items, you can actually do this in formtastic like so:

假设你有一个叫Items的模型，你可以用formtastic来做:

form.select :duration, 
           collection: Items.map{|item| [item.name, item.id, {"data-price" => item.price}]}

Essentially what you are doing is passing an array of arrays where the final value in each array is a hash. E.g.

本质上，您所做的是传递一个数组数组，其中每个数组的最终值是一个散列。如。

[  
  ['Item 1', 1, {"data-price" => '$100'}],   
  ['Item 2', 2, {"data-price" => '$200'}]
]

Rails 3+ (perhaps 2.x - I didn't confirm) will use the hash in such as array and simply add it to the html of the option tag. Giving you the following:

Rails 3 +(可能2。x -我没有确认)将在数组中使用散列，并将其添加到选项标签的html中。给你如下:

<option data-price="$100" value="1">Item 1</option>
<option data-price="$200" value="2">Item 2</option>

#3

options_for_select([
  ['Item 1', 1, data:{price: 121, delivery: 11}],
  ['Item 2', 2, data:{price: 122, delivery: 22}]
])

Produces

生产

<option data-delivery="11" data-price="121" value="1">Item 1</option>
<option data-delivery="22" data-price="122" value="2">Item 2</option>

Advantage

优势

Using data:{...} is more concise and if using multiple data tags can save code.

使用数据:{…}更简洁，如果使用多个数据标签可以保存代码。

#1