使用rails表单帮助器在选择列表中包装单选按钮

Question

我正在为搜索表单中的选择按钮而苦苦挣扎。当您单击预算选择字段时，我正在尝试复制他们在this website上的内容。我想创建一个包含单选按钮的下拉列表，每个单选按钮都有一个价格范围。如果我能够通过:sell_price_from和:sell_price_to将价格范围发送给参数，这将有助于弹性搜索找到属性。所以我只能制作单选按钮(使用f.radio_button )或选择下拉列表(f.select )，但不能同时使用这两种功能。

这是我的表单现在的样子：

<div class="w-full mx-4 pt-32">
  <div class="px-24">
    <div class="rounded-t-xl overflow-hidden p-4">
      <%= form_with model: @property, url: properties_path, method: :get, class: "", id: "search" do |f| %>
        <div class="flex flex-row">
          <div class="flex-1 w-auto min-h-0 min-w-0">
            <div class="bg-white relative">
              <%= f.label :q, "Search by keyword", class: "absolute left-8 top-4 text-sm text-black" %>
              <%= f.text_field :q, placeholder: "Search", class: "text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light pb-0" %>
            </div>
          </div>
          <div class="flex-1 w-auto min-h-0 min-w-0">
            <div class="bg-white relative">
              <%= f.label :sell_price, "Budget", class: "absolute left-8 top-4 text-sm text-black" %>
              <div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">

                <%= f.radio_button :sell_price_from, "100000" %>
                <%= f.label :sell_price_from, "100.000" %>
                <%= f.radio_button :sell_price_from, "200000" %>
                <%= f.label :sell_price_from, "200.000" %>

              </div>

            </div>
          </div>
          <div class="flex-1 w-auto min-h-0 min-w-0">
            <div class="bg-white relative">
              <%= f.label :type, "Type", class: "absolute left-8 top-4 text-sm text-black" %>
              <div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">
                <%= f.collection_select :property_type, PropertyType.all, :name, :name, {}, {class: "border-0"} %>
              </div>
            </div>
          </div>
          <div class="flex-1 w-auto min-h-0 min-w-0">
            <div class="bg-white relative">
              <%= f.label :rooms, "Rooms", class: "absolute left-8 top-4 text-sm text-black" %>
              <div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">
                <%= f.select :rooms, ["2", "3", "4"], { }, {class: "border-0"} %>
              </div>
            </div>
          </div>
          <div class="flex-none w-auto min-h-0 min-w-0">
            <div class="">
              <%= button_tag class: "bg-blue-500 text-white p-2 hover:bg-blue-400 focus:outline-none h-20 w-32 px-8 pt-10 pb-8 flex justify-center py-4 px-14 rounded-none text-base items-center whitespace-nowrap" do  %>
                <i class="fas fa-search"></i>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>

基本上，问题是，我如何在选择下拉列表中包装单选按钮？

Answer 1

示例下拉列表中包含一个选项的通用标签，这些选项并不是独立的，请参见示例

在rails中，如果你需要它是动态的，你可以尝试这样做：

<%= f.label :sell_price_range, "#{sell_price_from}"+  " - " + "#{sell_price_from_to}" %>

​

​