How to create a form with dependent fields? (RoR) - ruby-on-rails

Question

I am wondering how to create a form that displays field dependent on the fields selected beforehand. For example: if Coffee is selected as a drink, only then do I want to allow sugar and milk amounts to be input.
Here is my form:
<%= simple_form_for(#order) do |f| %>
<%= f.error_notification %>
<div class="field">
Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
</div>
Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %><br />
Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
<% end %>
<%= f.button :submit, class: "button is-info" %>
<% end %>

Answer 1

First you need to wrap the fields you'd like to hide in a div. Add a distinct id to each of them.
For example, if you want to hide coffee_type, you can add the id "js-coffee-type" to it.
Also, add a class (for instance, d-none, as used by Bootstrap) so we can hide it using CSS.
<%= simple_form_for(#order) do |f| %>
<div class="field">
Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
</div>
<div id="js-coffee-type" class="d-none">Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %></div>
<div>Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>
<div>Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>
<%= f.button :submit, class: "button is-info" %>
<% end %>
In the same file, you can write the CSS code that hides this field.
<style>
.d-none { display: none; }
</style>
Now you can write the JS code to toggle the class depending on the first field.
<script>
$("#extended_list").change(function() {
var drink = $("#extended_list").val();
if (drink == "Coffee") {
$("#js-coffee-type").removeClass("d-none");
} else {
$("#js-coffee-type").addClass("d-none");
}
});
</script>
These are not best practices but they should do the work.