change selection in dropdown when another dropdown value changes

[Sharon Snyder]

The details are:

Field 1 is in input with a collection, upon a selection, I wish to pre-select a value in Field 2.  The fields are related, and I am also thinking about limiting possible values in the dropdown of field 2 based on field 1's value.

Here is a simple example of what I am trying to do:

Field 1:  Choose numbers that are either divisible by 2, 3, 4,5  - where 2, 3, 4, 5 are the drop down values

Field 2:  Possible numbers:  12, 14, 15, 16, 18, 20 - select a specific value - and possibly remove from the list values that don't match the criteria in field 1.

So, if I choose 5 in Field 1, I want to select 15, and as a bonus, I'd like to remove from the Field 2 collection all values except for 15 and 20 in this case.

I have a coffee script set up that determines when Field 1 changes, but I can't seem to make it select an item in Field 2 and have it display to the user that this is selected.  I've set up the form as follows:

  <%= simple_form_for(@upload, url: upload_sentences_path, html: {method: :post, remote: true, data: { 'confirm-action' => true, 'confirm-cancel-callback' => 'resetLoadingStateForButtons' } }) do |f| %>

    <%= f.input :field_1, as: :select, :collection => divisors_collection, input_html: { id: 'field_2_value' } %>

    <%= f.input :field_2, collection: divisible_values, required: true, input_html: { id: 'field_1_value' } %>

    <%= f.button :submit, t('.button-upload'), :id => "submit_values", :class => 'btn btn-success', :data => { "loading-text" => t('.message-uploading') } %>

  <% end %>

My coffee script (somewhat pseudo-code to make it simpler) is this:

  field1_selector = '#field_1_value'

  field2_selector = '#field_2_value'

  constructor: () ->

    @setUpEvents()

  setUpEvents: () =>

    $(field1_selector).on 'change', (e) =>

      @fill_in_fields_for_display()

    return

  fill_in_fields_for_display: () =>

    item=$(field1_selector)[0]

    if ( item.selectedOptions.length > 0 )

      data_object=$.parseJSON(item.selectedOptions[0].getAttribute("data"))

      my_value=$.parseJSON(item.selectedOptions[0].getAttribute("value"))

      field2_object=$(field2_selector )

      for itm, index in field2_object[0].options

        if itm.value == my_value

          itm.selected=true

          field2_object[0].selectedIndex=index

          field2_object[0].selectedOptions[0].option = itm

          field2_object.change()

        else

          itm.selected=false

I definitely find the select item, and try to set the selection, but it doesn't seem to show the results to the screen.

Any help would be appreciated.

Thanks,

Sharon

[Sharon Snyder]

Oh and one more detail:  This is a legacy application running Rails 3, and Simple_form v2.0.4.  

Thanks again for any help!

Sharon