使用 rails 表单助手将单选按钮包装在选择列表中

如何解决使用 rails 表单助手将单选按钮包装在选择列表中

我正在为搜索表单中的选择按钮而苦恼。当您点击预算选择字段时，我正在尝试复制他们在 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,{},{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>

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

解决方法

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

在 Rails 中，如果您需要它是动态的，可以试试这个：

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