(($) ->
  $.fn.china_citys = () ->
    @each ->
      selects = $(@).find('.city-select')
      selects.change ->
        $this = $(@)
        next_selects = selects.slice(selects.index(@) + 1) # empty all children city
        $("option:gt(0)", next_selects).remove()
        if next_selects.first()[0] and $this.val() # init next child
          $.get "/china_citys/#{$(@).val()}", (data) ->
            next_selects.first()[0].options.add(new Option(option[0], option[1])) for option in data.data
            # init value after data completed.
            next_selects.trigger('china_citys:load_data_completed');
        $this.blur()
  $(document).on 'ready page:load', ->
    $('.city-group').china_citys()
)(jQuery)