将HTML ID添加到Rails选择选项

Question

我们正在使用simple_form并尝试向每个特定select_tag's选项添加一个id 。 这是我们的选择：

<%= f.input :category, collection: %w{ Football Basketball Golf Soccer }, :include_blank => "Choose one" %>

下面是它可以是什么样子之后我们添加了id/ids

<select class="select required form-control" id="sport_category" name="sport[category]">
  <option value="">Choose one</option>
  <option value="Football">Football</option>
  <option id="addBehavior" value="Basketball">Basketball</option>
  <option value="Golf">Golf</option>
  <option value="Soccer">Soccer</option>
</select>

但这也可以工作（向每个选项添加一个id ）

<select class="select required form-control" id="sport_category" name="sport[category]">
  <option value="">Choose one</option>
  <option id="football" value="Football">Football</option>
  <option id="basketball" value="Basketball">Basketball</option>
  <option id="golf" value="Golf">Golf</option>
  <option id="soccer" value="Soccer">Soccer</option>
</select>

我们希望添加js行为以在选择特定option并计划使用getElementById定位该选项时触发事件。 这就是为什么我们要在选项中添加id 。实际上仅是篮球选项。

Answer 1

您可以使用：

<%@array = ['Football', 'Basketball', 'Golf Soccer']%>

<%= f.select :category, ,options_for_select([['Choose One']] + @a.collect{|p| [p,{:id => p]}) %>

希望能帮助到你 ：）

Answer 2

尝试使用，

<%= f.input :category, collection: %w{ Football Basketball Golf Soccer }.map { |category| [category, category, {:id => category}]}, :include_blank => "Choose one" %>

当我尝试它时，它给了我html

<option value="">Choose one</option>
<option id="football" value="Football">Football</option>
<option id="basketball" value="Basketball">Basketball</option>
<option id="golf" value="Golf">Golf</option>
<option id="soccer" value="Soccer">Soccer</option>

可能有一种更干净的方法可以执行此操作，但是它可以工作。

如果你也这样做

<%= f.input :category, collection: [["Football", "football"], ["Basketball", "basketball", {:id => "basketball"}], ["Golf", "golf"], ["Soccer", "soccer"]], :include_blank => "Choose one" %>

那给了我html，

<option value="">Choose one</option>
<option value="Football">Football</option>
<option id="basketball" value="Basketball">Basketball</option>
<option value="Golf">Golf</option>
<option value="Soccer">Soccer</option>

同样，可能会有更清洁的方法！ 但这至少对我有用。

希望这可以帮助