RoR: Showing/hiding fields based on user selection when loading edit page?

Question

I have a dropdown in which a user makes a selection and then the appropriate fields in partials appear for them to complete.

My form fields

    <%= f.simple_fields_for :security do |security| %>
      <%= security.label :security_type %>
      <%= security.select :property_type, Security.property_types.keys, {}, class: 'project-dropdown- 
      width', id: "security" %>
                         
      <div id="property-fields">
        <%= render partial: "project_steps/security_partials/property", security: @security, locals: { security: security } %> 
      </div>
                                 
      <div id="other-fields" style="display: none;">
        <%= render partial: "project_steps/security_partials/land", security: @security, locals: { security: security } %>
      </div>
    <% end %>

application.js

document.addEventListener('turbolinks:load', () => {
  const element = document.getElementById('security');
    if (element) {
      $('#security').change((e) => {
        if (e.target.value == 'other') {
          $('#property-fields').eq(0).hide();
          $('#other-fields').eq(0).fadeIn();
        }
        else {
          $('#property-fields').eq(0).fadeIn();
          $('#other-fields').eq(0).hide();
        }  
     });
   }
});

This works fine for showing and hiding the required fields based on the option the user clicks in the form. But when a user saves, goes forward, and then goes back to the page again (to edit) the selected option is correct but the fields are not the right ones if they have chosen 'other' in this example. It would show 'Property' fields instead.

How can I make it so that the correct fields would show based on the user's selected option if the user goes back to the page to edit?

ty

Answer 1

Below code snippet the example of your solution. Please try executing that and let me know in comment if anything doesn't make sense.

When you change the option from select dropdown, it will call .change event on selector $("#security").

And same way you can have value of current selected value by having this line of jQuery code $("#security").val()

So all you need to have is that pre-selected value on edit page and you will have fields based on that.

// document.addEventListener('turbolinks:load', () => {
//   const element = document.getElementById('security');
//   if (element) {

      $('#security').change((e) => {
        showFields(e.target.value)
      });

      showFields($('#security').val());

      function showFields(val) {
        if (val == 'other') {
          $('#property-fields').eq(0).hide();
          $('#other-fields').eq(0).fadeIn();
        }
        else {
          $('#property-fields').eq(0).fadeIn();
          $('#other-fields').eq(0).hide();
        }  
      }

//   }
// });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="security">
  <option value="propertis">Properties</option>
  <option value="other" selected>other</option>
</select>
<div id="property-fields">
   These are property-fields
</div>                      
<div id="other-fields" style="display: none;">
   These are other-fields
</div>