rails 提供下拉框select和select_tag用法(附加form_for, form_tag提交表单的内容)

本文详细介绍了如何在网页开发中利用`select`元素、`form_for`、`ransack`、`options_for_select`等方法实现高效的数据筛选与管理功能,包括如何设置选项、处理不同状态的展示以及实现复杂的数据搜索逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.select配合form_for或ransack(gem)中的search_form_for来用, <%= f.select :status_eq, Subject::STATUS, {include_blank: "All status"}, class: "ui dropdown" %>, 第一个参数是status是配合form_for第一个参数后, 提交表单在action中可以params[:subject][:status]来引用, 在, 配合ransack的eq来用,当用ransack时候必须用eq来做, 第二个参数是subject.rb(modal)中的常量(也就是可选择的值),第三个参数是一开是没有选的时候是All status这个选项非常重要, 否则下拉条只有两种状态pending和running, 非黑即白, 而没有All status这个选项这个选项就是pending和running都匹配, 如果想要非黑即白就是只有存储的两个状态没有模糊全匹配的状态, 则第三个参数不传参但要用{}没内容的大括号来站位,  class属性是senmantic ui的美化属性该

实例:

index.html.erb中:

<div class="ui form">
  <%= search_form_for [:manage, @q] do |f| %>
    <div class="fields">
      <div class="field">
        <%= f.label :id_eq, "ID" %>
        <%= f.text_field :id_eq, placeholder: "subject ID"%>
      </div>


      <div class="field">
        <%= f.label :title_cont, "Title" %>
        <%= f.text_field :title_cont, placeholder: "Title code"%>
      </div>


      <div class="field">
        <%= f.label :status_eq, "Status" %>
        <%= f.select :status_eq, Subject::STATUS, {include_blank: "All status"}, class: "ui dropdown" %>
      </div>
      </div>


      <div class="fields">
        <div class="field">
          <label for="">Search</label>
          <button class="ui submit button" type="submit" name="action">
            <i class="search icon"></i>
            Search
          </button>
        </div>  


        <div class="field">
          <label>Subject</label>
          <a href="/manage/subjects/new" class="ui green button">
            New Subjects
          </a>
        </div>
      </div>
  <% end %>
</div>


实例:

#########select也可以用options_for_select()方法

search_addresses_controller.rb中:

#####定义@all_statuses变量存储形式是[["下拉框内容", “选中该下拉框后的值”], ["下拉框内容", “选中该下拉框后的值”], ["下拉框内容", “选中该下拉框后的值”]], ALL是模糊选项即所有的都匹配, 

  def edit
    @search_address = SearchAddress.find(params[:id])  
    @all_statuses = []
    @all_statuses << ['ALL', 'ALL']  
    @all_statuses = SearchAddress.country.inject([]){|sum, country| sum << [country.name, country.id]}
  end

_form.html.erb中:

#############form_for 配select, 选项为options_for_select()方法, 这个方法最后一个参数是没选之前的默认值(不能用f.country_id报错, 必须 @search_address.country_id)

#########***************重要!!!!!!form_for可以做编辑edit.html.erb页面, 因为form_for每个field都把该@search_address如:name, :lat等字段存在数据库里的值显示在页面上, 所以很重要!!!!!, form_for表单可以做edit.html.erb页面

<div class="ui divider"></div>
<div class="ui form">
  <%= form_for [:manage, @search_address] do |f| %>
      <div class="fields">
        <div class="field">
          <%= f.label :name %>
          <%= f.text_field :name %>
        </div>


        <div class="field">
          <%= f.label :lat %>
          <%= f.text_field :lat %>
        </div>
        <div class="field">
          <%= f.label :lng %>
          <%= f.text_field :lng %>
        </div>
      </div>


    <div class="fields">
      <div class="field">
        <%= f.label :address_type %>
        <%= f.select :address_type, SearchAddress::AVAILABLE_TYPES, {}, class: "ui dropdown" %>
      </div>


    <div class="field">
      <%= f.label :country_id %>
      <%= f.select :country_id, options_for_select(@all_statuses, @search_address.country_id), {include_blank: "Country name"}, class: "validate ui dropdown" %>
    </div>      


      <div class="field">
        <%= f.label :level %>
        <%= f.text_field :level %>
      </div>
    </div>


      <div class="row">
        <button class="ui submit blue button">
          Submit
        </button>
      </div>
  <% end %>
</div>


2.select_tag配合form_tag来使用, 需要在controller对用action中自定义一个集合来存下拉框的名字和选中后的值@all_statuses = [["All", "All"], ["running", "running"], ["pending", "pending"]], 模式是[["下拉框内容", “选中该下拉框后的值”], ["下拉框内容", “选中该下拉框后的值”], ["下拉框内容", “选中该下拉框后的值”]], ALL是模糊选项即两个都匹配, <%= select_tag :status, options_for_select(@all_statuses, params[:status]), class: "validate ui dropdown" %>, 第一个参数是提交表单在对应action中可以params[:subject][:status]来引用, 第二个参数是一个方法, 这个 方法的第一个参数是controller中对应action的变量集合, 第二个参数是页面的params[:status]的值也就是下拉框在页面的默认值


实例:

rooms_controller.rb中:

#####################action中取到options_for_select()所需要的第一个参数的变量@all_cities_code, @all_statuses, @all_countries_code

  def index
    authorize! :manage, Room


    @all_cities_code = [["All", "All"]] + Room.select(:city_code).order(city_code: :asc).uniq.select{|r| r.city_code.present? }.collect { |r| r.city_code }.compact
    @all_statuses = [["All", "All"], ["running", "running"], ["pending", "pending"]]
    @all_countries_code = ["All"] + current_user.countries


    p = params.except(*request.path_parameters.keys)


    p = p.merge(sort: "room_id|desc") if params[:sort].blank?


    p = p.merge(pre_conditions: {country_code: current_user.countries + [""]})


    @rooms = Room.search_with(p)


    @subject_types = Subject.all.inject([]){|result, element| result << element.subject_type}
  end


index.html.erb中:

#######注意select_tag的用法

      <%= label_tag :user_id, "User ID" %>
      <%= text_field_tag :user_id, params[:user_id], class: "validate", placeholder: "User ID" %>
    </div>


    <div class="field">
      <%= label_tag :name_or_number, "Name / Number" %>
      <%= text_field_tag :name_or_number, params[:name_or_number], class: "validate", placeholder: "name / number" %>
    </div>


    <div class="field">
      <%= label_tag :country_code, "Country Code" %>
      <%= select_tag :country_code, options_for_select(@all_countries_code, params[:country_code]), class: "ui dropdown" %>
    </div>


    <div class="field">
      <%= label_tag :city_code, "City Code" %>
      <%= select_tag :city_code, options_for_select(@all_cities_code, params[:city_code]), class: "ui dropdown" %>
    </div>


    <div class="field">
      <%= label_tag :status, "Status" %>
      <%= select_tag :status, options_for_select(@all_statuses, params[:status]), class: "validate ui dropdown" %>
    </div>
  </div>


  <div class="fields">
    <div class="field">
      <%= label_tag :guests_count, "guests" %>
      <%= text_field_tag :guests_count, params[:guests_count], class: "validate", placeholder: "Guests" %>
    </div>


    <div class="field">
      <%= label_tag :beds_count, "beds" %>
      <%= text_field_tag :beds_count, params[:beds_count], class: "validate", placeholder: "Beds" %>
    </div>


    <div class="field">
      <%= label_tag :rooms_count, "guests" %>
      <%= text_field_tag :rooms_count, params[:rooms_count], class: "validate", placeholder: "Rooms" %>
    </div>


    <div class="field">
      <%= label_tag :bathrooms_count, "bathrooms" %>
      <%= text_field_tag :bathrooms_count, params[:bathrooms_count], class: "validate", placeholder: "Bathrooms" %>
    </div>
  </div>


  <div class="fields">
    <div class="field">
      <%= label_tag :price_gte, "多于" %>
      <%= text_field_tag :price_gte, params[:price_gte], class: "validate", placeholder: "价格多于" %>
    </div>


    <div class="field">
      <%= label_tag :price_lte, "少于" %>
      <%= text_field_tag :price_lte, params[:price_lte], class: "validate", placeholder: "价格少于" %>
    </div>


    <div class="field">
      <%= label_tag :photos_count, "photos_count" %>
      <%= select_tag :photos_count, options_for_select(["All",0,1,2,3,4,5,6,7], params[:photos_count]), class: "validate ui dropdown" %>
    </div>
    
    <div class="field">
      <%= label_tag :position_gte, "position" %>
      <%= text_field_tag :position_gte, params[:position_gte], placeholder: "number", class: "validate ui dropdown" %>
    </div>
  </div>


  <div class="fields">
    <div class="field">
      <label for="">Search</label>
      <button class="ui submit button" type="submit" name="action">
        <i class="search icon"></i>
        Search
      </button>
    </div>


    <div class="field">
      <label for="">New</label>
      <a href="/manage/rooms/new" class="ui green button">New Room</a>
    </div>
  </div>
<% end %>


<div>
  <p></p>
  <span class="ui label">
    Total count
    <span class="detail"><%= @rooms.total_count %></span>
  </span>
</div>


<table class="ui celled structured table">
  <thead>
    <tr>
      <th colspan="12">
        Rooms List
      </th>
    </tr>
  </thead>
  <thead>
    <% p = params.except(*request.path_parameters.keys) %>


    <tr>
      <th>
        <% p1 = p %>
        <% p1[:sort] = "room_id|desc" %>
        <% pstr1 = p1.map { |key, value| "#{key}=#{value}" if value != "" && !value.nil? }.compact.join('&') %>
        <a href="/manage/rooms<%= "?#{pstr1}" if pstr1.present? %>">ID</a>
      </th>
      <th>
       Number
      </th>
      <th>
        Type
      </th>
      <th>
        User ID
      </th>
      <th>Name</th>
      <th>Country/State/City</th>
      <th>day price</th>
      <th>Photos count</th>
      <th>status</th>
      <th>
        <% p[:sort] = "position|desc" %>
        <% pstr = p.map { |key, value| "#{key}=#{value}" if value != "" && !value.nil? }.compact.join('&') %>
        <a href="/manage/rooms<%= "?#{pstr}" if pstr.present? %>">Position</a>
      </th>
    </tr>
  </thead>


  <% @rooms.each_with_index do |room, index| %>
    <tr class="<%= index % 2 == 0 ? "positive" : "" %>">
      <td rowspan="2"><%= room.id %></td>
      <td><%= room.number %></td>
      <td><%= room.type %></td>
      <td><%= room.user_id %> / <%= room.user.try(:full_name) %></td>
      <td><%= link_to room.name, "/rooms/#{room.number}", target: "_blank" %></td>
      <td><%= room.country_code %>/<%= room.state_code %>/<%= room.city_code %></td>
      <td><%= room.base_currency %> <%= room.get_day_price_value %></td>
      <td><%= room.photos_count %></td>
      <td><%= room.status %></td>
      <td><%= room.position %></td>
    </tr>
    <tr class="<%= index % 2 == 0 ? "positive" : "" %>">
      <td colspan="10">
        <div class="ui text menu" style="margin-top: 0; margin-bottom: 0">
          <div class="item">
            <%= link_to "update Subject", manage_add_subject_to_room_path(room), remote: true, class: "ui" %>
          </div>
          <div class="item">
            <%= link_to "Photos", manage_room_photos_path(room), class: "ui" %>
          </div>
          <div class="item">
            <%= link_to "Prices", manage_room_prices_path(room), class: "ui" %>
          </div>
          <div class="item">
            <%= link_to "Edit", edit_manage_room_path(room), class: "ui" %>
          </div>
          <div class="item">
            <%= link_to "reviews",manage_room_reviews_path(room), class: "ui" %>
          </div>
          <div class="item">
            <%= link_to "Detail", manage_room_path(room), class: "ui" %>
          </div>
        </div>
      </td>
    </tr>
  <% end %>
</table>


<%= paginate @rooms, theme: "materialize" %>


<div id="placeholder"></div>




###########!!!!!!!!!!!!!!!!!!!重要options_for_select()方法, 这个方法最后一个参数是没选之前的默认值


实例:

    <div class="fields">
      <div class="field">
        <%= f.label :checkin_time, "Checkin" %>
        <%= f.select :checkin_time, options_for_select(Room::TIME_CLOCK, @room.checkin_time.present? ? @room.checkin_time : "15:00"), {}, class: "ui dropdown" %>
      </div>
      <div class="field">
        <%= f.label :checkout_time, "Checkout" %>
        <%= f.select :checkout_time, options_for_select(Room::TIME_CLOCK, @room.checkout_time.present? ? @room.checkout_time : "12:00"), {}, class: "ui dropdown" %>
      </div>
      <div class="field">
        <%= f.label :breakfast, "Breakfast" %>
        <%= f.select :amenity_breakfast, options_for_select(Room::BREAKFAST, @room.amenity_breakfast.present? ? @room.amenity_breakfast : "0"), {}, class: "ui dropdown" %>
      </div>
    </div>


############!!!!!!!!!!重要:options_for_select()方法, 最后一个参数是设置默认值可以用上面的加一个语句来让显示的时候如果没有值则显示默认值如果有值则显示该对象的值(@room.amenity_breakfast.present? ? @room.amenity_breakfast : "0")

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值