Dropdown Menu with a description shown in an adjacent div

Ruby on Rails
1

What I need to accomplish:

I have a user sign-up form. In the form there are nested attributes for “Subscription plan” Those values are populated from the database. Easy-peazy on that.

However, what I need to do is have it when a user selects a specific item in the drop down, the description of that item shows up in a div. The subscription plan model has a ‘name’ and a ‘description’ field. Obviously the name will be the drop down item and I want the description to appear as in a nearby div.

Of course, this is a Jquery thing, I’m sure, however I have no clue how to execute this.

Any help would be appreciated!

2

I’d add a data attribute to the <option> elements that contains the description. So it would look like:

<option value="1" data-description="this is the description">Name</option>

Then add a jQuery event on the select box that will get the selected option, get the data-description attribute, and update the div with that text.

On the rails side, options_for_select and related helpers should let you set data attributes on the option elements.

1 Like