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