如何在 select_tag rails 5 中添加数据触发属性

Posted 2023-05-09

【中文标题】如何在 select_tag rails 5 中添加数据触发属性

【英文标题】：How to add data-trigger attribute in select_tag rails 5

【发布时间】：2019-03-30 23:46:21

【问题描述】：

我正在尝试将 data-trigger 属性添加到我的表单中，但每次添加 data-trigger 时都会出现语法错误。我已经尝试了使用列和括号以及等号的不同语法，但似乎没有任何效果。

这是我的看法：

<div class="container">

 <div class="s003">
   <%= search_form_for @search, url: search_path, remote: true do |f| %>
      <div class="inner-form">
        <div class="input-field first-wrap">
          <div class="input-select">
            <%= f.select :wine_type_gteq, [["Riesling", "Riesling"], ["Gewürztraminer", "Gewürztraminer"], ["Chardonnay", "Chardonnay"], ["Sauvignon Blanc", "Sauvignon Blanc"],
            ["Weißburgunder", "Weißburgunder"], ["Grauburgunder", "Grauburgunder"], ["Spätburgunder", "Spätburgunder"], ["Tempranillo", "Tempranillo"], ["Pinotage", "Pinotage"], ["Shiraz", "Shiraz"], ["Cabernet Sauvignon", "Cabernet Sauvignon"],
            ["Merlot", "Merlot"], ["Syrah", "Syrah"], ["Pinot Noir", "Pinot Noir"], ["Cabernet Franc", "Cabernet Franc"], ["Malbec", "Malbec"], ["Garnacha", "Garnacha"], ["Sangiovese", "Sangiovese"]], id: "wine_type", prompt: "Select..." %>
          </div>
        </div>
        <div class="input-field second-wrap">
          <%= text_field_tag :search, params[:search], placeholder: "Wein...", class: "form-control", id: "autolocation" %>
        </div>
        <div class="input-field third-wrap">
          <button class="btn-search">
            <%= submit_tag "Suchen", style: "color:white" %>
          </button>
        </div>
      </div>
      <% end %>
  </div>
</div>
<script>
  const choices = new Choices('[data-trigger]',
  
    searchEnabled: false,
    itemSelectText: '',
  );

Want我想要实现的：

<div class="input-select">
              <select data-trigger="" name="choices-single-defaul">
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
                <option>Category</option>
              </select>
            </div>

【参考方案1】：

<%= f.select :wine_type_gteq, [["Riesling", "Riesling"],...],  prompt: "Select..." , id: "wine_type", data:  trigger: 'something'  %>

Document

【讨论】：

然而 html 属性在选项旁边，在数组之后应该是 , data: trigger: 'something' , rigth ?

@DiegoPatricioAguilefSánchez 我在 OP 的示例中保留了 prompt: "Select..."，id: "wine_type", data: trigger: 'something' 等效于 id: "wine_type", data: trigger: 'something' ，因此在这种情况下， prompt: "Select..." 将被传递给 options 和 id: "wine_type", data: trigger: 'something' 传递给html_options