方法:simple_form的select用法

在团体项目中需要在后台添加约饭地点,用关联的方法实现。这样写不会把栏位写死,删除和更改都很方便。 用户可以再新增约饭(posts/new.html.erb)才用下拉框进行选择。

#####最开始尝试的写法是 <%= f.input :eat_venue, :collection => Restaurant.all, :selected => Restaurant.first %> 收集所有的饭店,下拉出来的值是饭店的名称,但是实际输出的值是restaurant的id。

#####改进写法 <%= f.input :eat_venue, :collection => Restaurant.all,:value_method => :name,:label => "约饭地点" ,:include_blank => false %> 加入:value_method 就可以选择想要参数,显示和输出的都相同。:include_blank => false会取restaurant.first.name为预留值。

<%= f.select :eat_venue, Restaurant.all.collect { |p| [ p.name ] }, :selected => Restaurant.first.name,label: '约饭地点' %> 最后的终极写法 ` <%= f.input :eat_venue, :collection => @restaurants,:selected => @restaurants.first.name, label: ‘约饭地点’%>`

对应的controller写法
def new 
  @post = Post.new 
  @restaurants = Restaurant.all
end

#####为了更好的用户体验,当用户选择餐馆的时候对应的详细地址也要显示出来。 实现思路:在后天添加对应餐馆的详细地址。在new页面加入隐藏的div标签,div内列出所有的详细地址。然后用js抓取值。 实现方法: 1.添加隐藏信息

详细地址:<span id='cg'></span>
                       <br><br>
                        <% @restaurants.each do |restaurant| %>
                          <div class="hidden"><span id="restaurant_<%=restaurant.id%>"><%=restaurant.description%>
                          </span></div>
                        <% end %>

2.用chrome的检查模式找出 <%= f.input :eat_venue, :collection => @restaurants,:selected => @restaurants.first.name, label: '约饭地点'%>对应的id。 3.构写js代码

	$(function (){
				function aletSelect(obj){
					obj.change(function(){
					 $("#cg").text($("#restaurant_"+obj.val()).text())
					});
					obj.ready(function(){
					 $("#cg").text($("#restaurant_"+obj.val()).text())
					});
				}
				var selectObj = $("#post_eat_venue");
				aletSelect(selectObj);
			});