Displaying an address from a selected location

So in a form I have locations which are set in a collection_select statement in the form. Each location has a name (Dairy Queen, McDondalds, etc) and has an address in the Location model. When selecting a location from the drop down, I'd like a small div to show up next to the location name that displays the address. I think I can do this with CoffeeScript but not sure on how to do this cleanly. I'm trying to keep this specific to jQuery or CoffeeScript instead of having to use mustache or another rendering template.

Any advice on this? This is less of a Rails question but figured you might be able to shed some light on this.

This is pretty simple actually. Just did it on One Month's app. You'll add data attributes to the options in the select, and then you can grab those on change to display on the side. This is using simple_form, but you can convert this to a regular select_tag.

<%= f.input :location_id, as: :select, collection: @locations.map{ |c| [c.title, c.id, data: {icon: c.icon, description: c.description}] } %>

Elsewhere you would have an empty div for the location details:

<div class="location-details"></div>

jQuery ->
  $("#location_id").on "change", (e) ->
    selected = $("#location_id option:selected")
    $(".location-details").html("""
    <img src=#{selected.data("icon")} />
    <h3>#{selected.text()}</h3>
    <p>#{selected.data("description")}</p>
    """)

Of course, if you have an item pre-selected, you can have the JS fire the function on page load as well to use the selected data.

Awesome Chris. I'll give this a try today. I'm using Rails 3.2.21 and regular forms, not Simple_form so I can convert it. Syntax looks way different than my collection select, but I'll give it a shot. Definitely put me on the right track. You're the man :)

Edit: Actually I'm using grouped_collection_select in my form. Should this matter?

It's basically gonna be like this I think with a regular select tag.

<%= f.select :location_id, @locations.map{ |c| [c.title, c.id, data: {icon: c.icon, description: c.description}] %>

I really want to do this in React. Just sayin.

Chris, how would this work if I'm using a grouped_collection_select? Can I pass data attributes into it? I'm pretty sure by using .map I can pass the data and display the jQuery/Coffee, but my select is a grouped one. Below is sample code:

<%= f.grouped_collection_select :location_id, Region.order(:area), :active_locations, :area, :id, :location_name, {include_blank: true}, class: 'select' %>

I don't think you can with that. You would need to create the grouped options separately and pass to a regular select.

You should be able to create the grouped options with this and then pass it into a normal <%= f.select %> http://apidock.com/rails/v4.1.8/ActionView/Helpers/FormOptionsHelper/grouped_options_for_select

Ok, I'll look into this. grouped_collection_select is kicking my ass today.

Yeah, I tend to shy away from those combined select helpers. The normal select with a separate call to options_for_select give syou a lot more flexibility. It's what it does behind the scenes anyways.

Yeah, the only reason why I'm using the grouped_collection_select is so I can split locations by regions. So all of Dallas locations will show first, than Houston, etc. Looks like I got my hands full with this one today.

Yeah, for sure. Also, I meant that it's great to use grouped_options_for_select with f.select just not grouped_collection_select. Same goes for options_for_select with f.select instead of collection_select.

Kinda confusing.

Sweet, sounds like I'll be looking into the grouped_options_for_select with f.select then. Hoping it doesn't break all the other coffee I wrote :) All part of the fun. I'll post if I get stuck.

I'm stumbling over the grouped_options_for_select here. Could you give me a hand in translating this into a regular select? I'm having a dumb blonde moment.

<%= f.grouped_collection_select :location_id, Region.order(:area), :active_locations, :area, :id, :location_name, {include_blank: true}, class: 'select' %>

I also tried a regular select with the .map and passing data attributes to test it out and it won't connect to the jQuery. Nothing fires on change and there's no console output.

Here's what I tried in the form:

<%= f.select :location_id, Location.all.map{ |c| [c.location_name, c.id, data: {address: c.location_address}] %>

And here's what my jQuery looks like:

jQuery ->
$("#run_location_id").on "change", (e) ->
selected = $("#run_location_id option:selected")
$("#location-address").html("""
<h3>#{selected.data("address")}</h3>
""")