#88 Dynamic Select Menus (revised)
Do you need to dynamically change one select menu based on the value of another? Here I show how to filter states/provinces by a selected country using grouped options and a dab of CoffeeScript.
- Download:
- source code
- mp4
- m4v
- webm
- ogv
Resources
people/new.html.erb
<%= f.grouped_collection_select :state_id, Country.order(:name), :states, :name, :id, :name, include_blank: true %>
app/assets/javascripts/people.js.coffee
jQuery ->
$('#person_state_id').parent().hide()
states = $('#person_state_id').html()
$('#person_country_id').change ->
country = $('#person_country_id :selected').text()
escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
options = $(states).filter("optgroup[label='#{escaped_country}']").html()
if options
$('#person_state_id').html(options)
$('#person_state_id').parent().show()
else
$('#person_state_id').empty()
$('#person_state_id').parent().hide()