【问题标题】:Select value in dropdown based on db value in Ruby根据 Ruby 中的 db 值在下拉列表中选择值
【发布时间】:2012-09-14 02:00:53
【问题描述】:

我有一个简单的 Sinatra 应用程序,您可以使用它来记录您在某个晚上喝的啤酒、它们的数量和类型。要编辑其中一个用户输入的夜晚,我有一个简单的表单,它反映了创建饮酒事件时输入的值:

<input type="text" value="<%= @beer.name %>" name="name"/>
<input type="text" value="<%= @beer.price %>" name="price"/>

因此,从数据库值中填充值是一件好事。现在,如何选择下拉菜单的值?

<select name="night">
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
    <option value="Sunday">Sunday</option>
  </select> 

我发现我可以使用内联 jquery 来做到这一点:

<script>
$(document).ready(function(){
$(".edit select[name=type] option").each(function(){
if ($(this).val() == "<%= @beer.type %>"){
  $(this).attr("selected", true );
}
});
$(".edit select[name=night] option").each(function(){
if ($(this).val() == "<%= @beer.night %>"){
  $(this).attr("selected", true );
}
});
});
</script> 

但我真的不想求助于内联 js。有什么建议吗?

【问题讨论】:

    标签: jquery ruby-on-rails ruby sinatra


    【解决方案1】:

    我会做这样的事情

    <select name="night">
      <% ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].each do |day| %>
        <option <%= 'selected="selected"' if day == @beer.night %> value="<%= day %>"><%= day %></option>
      <% end %>
    </select>
    

    【讨论】:

      【解决方案2】:

      您可能希望从选择下拉框的简单 id 选择器开始,如下所示:

      <select id="day">...</select>
      
      Then create an external javascript file, call it whatever you like such as day_select_handler.js  and include it in your view.
      
      <html>
      <head>
        <script type="text/javascript" src="day_select_handler.js"></script>
      </head>
      ...
      

      这样,javascript 文件将在此页面加载时加载。 而且它不是内联的,也可以在其他页面中重复使用。

      【讨论】:

      • javascript里面有ruby实例变量,所以放在js文件里是行不通的
      • 我会说使用数据属性将实例变量放在您的视图中。然后在您的 javascript 中使用 $('#something').data('beer_type') 检索数据属性
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多