RoR：Showing/hiding 加载编辑页面时基于用户选择的字段？

Question

我有一个下拉菜单，用户可以在其中进行选择，然后会出现部分中的相应字段供他们完成。

我的表单域

    <%= 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();
        }  
     });
   }
});

这适用于根据用户在表单中单击的选项显示和隐藏必填字段。但是，当用户保存、前进，然后再次返回页面（进行编辑）时，所选选项是正确的，但如果他们在此示例中选择了 'other'，则字段不正确。它会显示 'Property' 个字段。

如果用户返回页面进行编辑，我如何才能根据用户选择的选项显示正确的字段？

有

Answer 1

下面的代码片段是您的解决方案示例。请尝试执行它，如果有任何不合理之处请在评论中告诉我。

当您从 select 下拉菜单中更改选项时，它将在 select 或 $("#security") 上调用 .change 事件。

同样，您可以通过 jQuery 这行代码 $("#security").val()

获得当前 selected 值

因此，您只需要在编辑页面上预先 select 编辑值，您就会有基于该值的字段。

// 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>

RoR：Showing/hiding 加载编辑页面时基于用户选择的字段？

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

javascript

jquery

ruby-on-rails

show-hide