How to submit id and not value in form with Select2?

Question

JavaScript

There is an application on Ruby on Rails, where you can set the country on the post editing page, here is the input'a code (I use a simple form):

= f.input :country, label: t("heading.country"), as: :string, input_html: { class: 'select2', data: { allowadd: true, depth: 0, id: post.location.country.id, url: search_locations_path } }

In CoffeeScript I include select2

loadSelect2 = (selector = '.select2') ->
  $(@).select2
    ajax:
      data: (term, page) ->
        search: term
        depth: $(@).data('depth')
      results: (data, page) ->
        results: data
      url: $(@).data('url')
    createSearchChoice: (term, data) ->
      if $(data).filter(->
        @title.localeCompare(term) is 0
      ).length is 0
        id: term
        title: term
    createSearchChoicePosition: 'bottom'
    formatResult: (item) ->
      item.title
    formatSelection: (item) ->
      item.title
    initSelection: (element, callback) ->
      callback
        id: $(element).data('id')
        title: $(element).val()

The same, but in vanilla:

var loadSelect2;

loadSelect2 = function(selector) {
  if (selector == null) {
    selector = '.select2';
  }
  return $(this).select2({
    ajax: {
      data: function(term, page) {
        return {
          search: term,
          depth: $(this).data('depth')
        };
      },
      results: function(data, page) {
        return {
          results: data
        };
      },
      url: $(this).data('url')
    },
    createSearchChoice: function(term, data) {
      if ($(data).filter(function() {
        return this.title.localeCompare(term) === 0;
      }).length === 0) {
        return {
          id: term,
          title: term
        };
      }
    },
    createSearchChoicePosition: 'bottom',
    formatResult: function(item) {
      return item.title;
    },
    formatSelection: function(item) {
      return item.title;
    },
    initSelection: function(element, callback) {
      return callback({
        id: $(element).data('id'),
        title: $(element).val()
      });
    }
  });
};

So, I can choose a country from the list or add it manually if there are no options in the list. I get the initial values ​​from val() input'a and data-id input'a, this is described in the initSelection function.
If I select any country from the list and submit the form, then everything works as intended: the post_params['country'] variable contains an id, that is, a number. If I submit the form without changing the country selection, then instead of id I get the value of the country selected by default, but I need id.
What am I doing wrong and how to fix it?

Answer 1

Now I began to use gem "select2-rails"
There is a presentation on Habrahabr - How we wrapped Select2 into a helper
Very convenient, there is documentation with examples.

Answer 2

The input value must initially contain id. You apparently have Country#to_s and the name is rendered there.
or

= f.input :country, input_html: { value:  post.location.country.id }

Answer 3

The answer is:

= f.input :country, 
               label: t("heading.country"), 
               as: :string, 
               input_html: { value: @post.location.country.id, 
                                    class: 'select2', 
                                    data: { allowadd: true, 
                                               depth: 0, 
                                               title: @post.location.country.title, 
                                               url: search_locations_path } }

initSelection: (element, callback) ->
      callback
        id: $(element).val(),
        title: $(element).data('title')

Answer 4

In vain you use CoffeeScript, so the number of people willing to help you is drastically reduced