Как реализовать динамический grouped_collection_select, где пользователи могут "Добавить новый"?

Question

В приложении Rails 3.2 у меня есть пара полей динамического выбора. Типичным примером этого является выбор страны, который при изменении отфильтрует параметры выбора штата. Это работает отлично.

Но что, если мне нужно разрешить пользователям добавлять новое состояние в список?

Кажется, это должно быть довольно распространенным случаем, но я не смог найти много информации о лучших подходах. То, что я нашел, относится к select теги и grouped_collection_select тег, который я использую, является более сложным.

Я хотел бы узнать мнение других и опыт реализации чего-то подобного. На самом базовом уровне, как бы вы занялись этим?

Например, я мог бы включить опцию Add New в select (заметьте, что следующие обозначают понятия, а не допустимый код), либо через контроллер, либо через javascript.

@state_options = State.all.collect {|so| [ so.country.id, so.id, so.name ] }
@state_options << [nil, nil, "Add New"]

И затем определите, был ли выбран "Добавить новый":

1. Либо при сохранении, после чего отображается всплывающее окно, в котором пользователь может указать название штата, родительскую страну и другие сведения.
2. Или при изменении, в этот момент некоторые дополнительные поля отображаются с помощью JavaScript (лучше UX, но требуется запасной вариант, если JavaScript не присутствует).

Или я мог бы добавить ссылку "Добавить новый", которая:

1. Отображает всплывающее окно с новой формой состояния, которое при сохранении выполняет обновление Ajax в поле выбора состояния.
2. Заменяет выделенное состояние некоторыми текстовыми полями, которые встроены в новое состояние при сохранении родительской формы.

Поэтому я хотел бы знать, какой подход лучше и почему?

И я также был бы благодарен за некоторые закодированные примеры. Я экспериментировал с объединенным @state_options массив выше, но я борюсь с синтаксисом - syntax error, unexpected '['и мои навыки работы с JavaScript не очень развиты.

Мой код в настоящее время выглядит так:

<%= simple_form_for(@address ) do |f| %>
  <%= f.collection_select :country_id, Country.order(:name), :id, :name, include_blank: true %>
  <%= f.grouped_collection_select :region_id, Country.order(:name), :regions, :name, :id, :name, include_blank: true %>
<% end %>

(Я бы заменил: регионы с @state_options в сгруппированном выборе выше, если я пойду по этому пути.)

Coffeescript выглядит так

jQuery ->
    states = $('#address_state_id').html()
    console.log(states)
    $('#address_country_id').change ->
        country = $('#address_country_id :selected').text()
        escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
        options = $(states).filter("optgroup[label=#{escaped_country}]").html()
        console.log(options)
        if options
            $('#address_state_id').html(options)   
        else
            $('#address_state_id').empty()