groups.js

  var groupSelect = $('#user_group_id'),
      groupSelectField = $('.field.group-select');

  groupSelect.children().first().after($('<option></option>').attr('value', 'new').text('<%= t("form.user.new_group") %>'));

  groupSelectField.children().last().after($('<form></form>').attr('class', 'inner-form'));
  
  var innerForm = $('.inner-form');

  
  innerForm
    .append($('<input></input>').attr({
      name: 'group[name]',
      id: 'group-name'
    }))
    .append($('<input></input>').attr({
      type: 'submit',
      id: 'new-group',
      class: 'btn btn-large btn-primary'
    }));

  var newGroupSubmit = $('#new-group');

  innerForm.hide();

  groupSelect.on("change", function() {
    // add inner-form to DOM for add new group if select value == new
    if($(this).val() === "new") {
      innerForm.show();
     
    };
  });

  newGroupSubmit.on('click', function(e) {
    console.log(innerForm.serialize());
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '/<%= I18n.locale %>/groups',
      dataType: 'HTML',
      data: innerForm.serialize(),
      success: function(data, status, xhr) {
        var newGroupName = $('#group-name').val();
        groupSelect.children().last().after($('<option></option>').attr('value', 'new').text(newGroupName));
      },
      error: function(data, status, error) {
        console.log(error);
      }
    });
  });

groups_controller.rb

 class GroupsController < ApplicationController
  def create
    @group = Group.new(params[:group])

    respond_to do |format|
      if @group.save
        
        format.html { redirect_to @group, notice: t('notice.created_success', model: "#{t "activerecord.models.group"}") }
        format.json { render json: @group, status: :created, location: @group }
      else
        if request.xhr?
          render status: 403 
        else
          format.html { render action: "new" }
          format.json { render json: @group.errors, status: :unprocessable_entity }
        end
      end
    end
  end
end