Dynamically change radio button with select (Ruby on Rails) - ruby-on-rails

Question

I'm new at programming and Rails in particular.
I have a form to create new goal records.
I have a select to chose the goal "Horizon": "weekly", "quarterly", or "yearly"
I also have a radio button, "Due date" to set the goal as for this term or next term (e.g. in the case of a weekly goal: this week or next week).
What I would like to do: is to dynamically update the radio button, based on the selected option of the select.
<%= form_with(model: #goal, url: goals_path, id: "new-goal-form", local: true) do |f| %>
<p><%= #goal.errors[:date].first %></p>
<div class="field">
<label class="label">Title</label>
<div class="control">
<%= f.text_field :title, class: "input"%>
</div>
<p><%= #goal.errors[:title].first %></p>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<%= f.text_area :description, class: "textarea"%>
</div>
</div>
<div class="field">
<label class="label">Horizon</label>
<div class="control">
<div class="select">
<%= f.select :horizon, options_for_select({"Weekly" => "week", "Quarterly" => "quarter", "Yearly" => "year"}, #horizon), include_blank: true %>
</div>
</div>
</div>
<div class="field">
<label class="label">Due Date</label>
<div class="control">
<%= f.radio_button :date, DateTime.current.to_date.end_of_week.strftime('%Y-%m-%d'), :checked => true, id:"radio-this", class: "is-checkradio" %>
<label for="radio-this">
This <%= #horizon.capitalize %>
</label>
<%= f.radio_button :date, 1.week.from_now.to_date.end_of_week.strftime('%Y-%m-%d'), id:"radio-next", class: "is-checkradio" %>
<label for="radio-next">
Next <%= #horizon.capitalize %>
</label>
</div>
</div>
<div class="field">
<label class="label">Related goal</label>
<div class="control">
<div class="select">
<%= f.select :related_goal_id, options_from_collection_for_select(#related_goal, 'id', 'title'), include_blank: true %>
</div>
</div>
</div>
<br/>
<div class="field is-grouped">
<div class="control">
<%= f.submit "Save", class: "button is-primary" %>
</div>
<div class="control">
<%= link_to "Cancel", goals_path(horizon: #horizon), class: "button" %>
</div>
</div>
<% end %>
I have tried adding :onchange at the end of the select, but nothing actually happens when changing the selected option.
Many thanks in advance.

Answer 1

Are your radio buttons id'd differently? They seem to both have the same autogenerated id. That won't work in javascript. Down below you set a click event for the select box and depending on what child is selected, you set a radio button checked to true.
$(document).ready(function(){
//when select option is chosen, set radio button to selected.
$("#select").click(function(){
var option = $(this).children("option:selected").val()
if(option == "weekly"){
$("#radio_button_weekly").prop("checked", true);
}
)}
)};