javascript - dynamic drop down, show results -

i have model, firms, following attributes: state , name. i'd have user view list of names in selected state. able states in dropdown box, struggling have names appear below after selecting state. looked throughout options on here, couldn't find solution. presume need javascript? help. below view code.

 <h4>select state</h4> <%= select_tag :state, options_for_select(firm.order(:state).uniq.pluck(:state)) %> 

here example of i'd results like:

user selects state: pennsylvania

pennsylvania names appear below: box company car company . . .

the user selects state, javascript event fires, ajax call gets made , results gets showed under:

html

<%= select_tag :state, options_for_select(firm.order(:state).uniq.pluck(:state)), id: "my-select" %> <div id='names-wrapper'></div> 

coffee

  $("#my-select").change ->    state = $(this).val()    alert(state)    $.ajax      url: "/firms/get_names"      data:        state: state      success: (data) ->        $('#names-wrapper').html('')        $.each data, (index, value) ->           $('#names-wrapper').append(value) 

routes

resources :firms   collection     :get_names   end end 

controller

class firmscontroller < applicationcontroler   def get_names     state = params[:state]     names = firm.where(state: state).pluck(:name)     return render json: names.to_json   end end