How: 'on change' change selector through AJAX correctly?

I would like to implement an on change event to two select fields.

I have one select field for countries, a second select field for shipping options for a given country and when 1st country and 2nd shipping has been selected I would like to display the shipping cost.

I am following a tutorial about Dynamic select boxes with Rails 4 which is well written, but it does not work.

I have a carts_controller in apps/controller

class CartsController < ApplicationController
  def show
    @cart = Cart.find(params[:id])
    @lands = Land.find(:all)
    @shippingservices = @cart.available_shipping_services.includes(:lands, :postzones).where('postzones.land_id = ?', Land.first.id)
  end

  def show_shipping
    @shippingservice = Shippingservice.find_by("id = ?", params[:cart][:shippingservice_id])
  end

  def update_shipping
    @shippingservices = Shippingservice.where("land_id = ?", params[:land_id])
    respond_to do |format|
      format.js
    end
  end
end

routes.rb

  match '/carts/show_shipping/:id',  :to => 'carts#show_shipping', :as => :show_shipping
  match '/carts/update_shipping',    :to => 'carts#update_shipping'

In the tutorial there is a coffee script part. Unfortunately I do not know coffee. I adapted it, but might have made a mistake. It is in the asset javascript directory.

$ ->
  $(document).on 'change', '#lands_select', (evt) ->
    $.ajax 'update_shipping',
      type: 'GET'
      dataType: 'script'
      data: {
        country_id: $("#lands_select option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic lands select OK!")

app/views/carts/show.html.erb

<div id="cart_shipping">
  <%= form_for :cart, :url => {:action => "show_shipping"}, :html => {:method => "get"} do |f| %>
    <%= f.select(:land_id, options_for_select(@lands.collect { |l| [l.name.titleize, l.id] }, 0), {}, {:id => 'lands_select', :prompt => "select a country"}) %><br>
    <%= f.select(:shippingservice_id, options_for_select(@shippingservices.collect { |s|
            [s.title.titleize, s.id] }, 0), {}, {:id => 'shippingservices_select', :prompt => "select a carrier"}) %><br>
    <%= f.submit "Calculate shipping" %>
  <% end %>
</div>

app/views/carts/update_shipping.js.erb

$("#shippingservices_select").empty()
  .append("<%= escape_javascript(render(:partial => @shippingservices)) %>")

app/views/carts/_shippingservice.html.erb

<option value="<%= shippingservice.id %>"><%= shippingservice.name.titleize %></option>

When I load the page I get:

TypeError: undefined is not a function (near '...$(document).on...')

Did I miss something?

How can I get this done? Maybe even in plain javascript, since I know a little bit about Javascript ...

Thanks in advance!

Some more context: I have jQuery 2.2.4 and 2.2.4.min in asset folder and I have to use Rails 3.