如何在 Rails 表单选择标签中添加数据属性？

Posted 2023-03-05

【中文标题】如何在 Rails 表单选择标签中添加数据属性？

【英文标题】：How to add data attribute in Rails form select tag?

【发布时间】：2015-11-06 17:50:52

【问题描述】：

我发现了这个Bootstrap Select 项目及其gem for Rails。我想在 select 标签中实现搜索。

我会检查元素，这里是 html 源代码：

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog, Fries and a Soda</option>
  <option>Burger, Shake and a Smile</option>
  <option>Sugar, Spice and all things nice</option>
</select>

如何在我的表单选择标签中添加data-live-search="true"？

我的表单选择：

<%= f.select :food_id, options_for_select(Food.all.map|c| [c.name, c.id], f.object.food_id), , class: "form-control selectpicker" %>

我尝试过的：

<%= f.select :food_id, options_for_select(Food.all.map|c| [c.name, c.id], f.object.food_id), , class: "form-control selectpicker", data: "live-search" %>

但它不起作用。

【问题讨论】：

你试过class: "form-control selectpicker", "data-live-search" => "true" 吗？

或者，data: 'live-search' => 'true' 。

class: "form-control selectpicker", "data-live-search" => "true" 工作。但是搜索部分现在不起作用。很奇怪。

什么是搜索部分？

现在我有了这个：<select class="form-control selectpicker" data-live-search="true" name="order[foods_orders_attributes][0][food_id]" id="order_foods_orders_attributes_0_food_id"><option selected="selected" value="7">Nasi Ayam</option> <option value="9">Kebab</option></select> 但它不起作用。

【参考方案1】：

<%= f.select :food_id, options_for_select(Food.all.map|c| [c.name, c.id], f.object.food_id), , class: "form-control selectpicker", data: "live-search": true %>

【讨论】：

我投赞成票，因为它是正确示例的完整答案，而不仅仅是部分代码

【参考方案2】：

试试：

class: "form-control selectpicker", "data-live-search" => "true" 

【讨论】：

非常感谢。经过一天的搜索，它解决了我的问题！ ;)

【参考方案3】：

  <%= f.select(:plan_id, ,, 'v-model'=>"plan_id",'@change'=>"onChange", class: "form-control") do  %>
<% Plan.all.each do |plan| %>
    <%= content_tag(:option,"#plan.name.upcase #plan.max_items  #number_to_currency(plan.price)", value:plan.id, :data => items: plan.max_items, price: plan.price) %>
<% end%>
<% end%>

【参考方案4】：

如果你传递一个块给select，你需要传递两次，例如

    => f.select :to_user_id, , , data:  placeholder: "Choisis des invités..." , class: "chosen-image" do
      - User.find_each do |user|
        option(data-img-src="#user_image_url_for(user)" value="#user.id")
          = user.first_name