Question

I have a simple Sinatra app that you can use to record the beers you drank on a certain night, their quantity, and type. To edit one of these user-entered nights I have a simple form that reflects the values that were entered when the drinking event was created:

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

So that’s all well and good to have the value be populated from the database value. Now, how do I select the value for dropdown?

<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> 

I found I could do it using inline 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> 

But I don’t really want to have to resort to inline js. Any suggestions?

Answer 1

I would do something like this

<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>