与设计用户相关联的多个模型-根据角色选择填写一个模型

Im使用design进行用户注册，其中包含字段：电子邮件、密码和角色。

当用户从选择框（学生、教师、管理员）中选择角色时，我希望应用程序呈现其中一个角色的嵌套字段。每个角色存储不同的信息，并以其自身权利作为模型存在。

我有一个javascript，它根据当前选择显示和隐藏适当的div。

问题是，除非我完成所有模型的字段，而不仅仅是当前选择的模型，否则表单无法提交。我意识到这是因为我渲染了所有的部分，然后简单地用javascript隐藏它们。

问题：如何使用javascript仅动态呈现包含当前所选模型的模型字段的部分？

新注册查看

h2>Sign up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>
  <h3>Login Details</h3>
  <br />
  <div class = "row">
    <div class = "col-md-3"></div>
    <div class = "col-md-6"><div class = "panel panel-midnight">
      <div class = "panel-heading"><h3 class = "panel-title">Create an account</h3></div>
      <div class = "panel-body">
      <div class="form-inputs">
        <%= f.input :email, :required => true, :autofocus => true, :placeholder => "Enter email address" %>
        <br />
        <%= f.input :password, :required => true, :placeholder => "Password" %>
        <br />
        <%= f.input :password_confirmation, :required => true, :placeholder => "Confirm Password" %>
        <br />
        <%= f.input :role, :label => "I am a:", :collection => ["Student","Teacher","Admin"], :required => true %>
      </div>
      <h3>Profile</h3>

      <div id = "student_fields">
       <%= render partial: "student_fields", locals: {:f => f} %>
      </div>
      <div id = "teacher_fields">
        <%= render partial: "teacher_fields", locals: {:f => f} %>
      </div>
      <div id = "admin_fields">
        Admin
      </div>
      <br />
  <% end %>
  <br />
  </div>
  <div class = "col-md-3"></div>
  </div>
  </div>
  </div>

<! Javascript to show/hide specific fields for each role>

<script>

  $(document).ready(function(){
     if($('#user_role').val() != "Student"){
        $("#student_fields").css('display','none');
     }
     else{
        $("#student_fields").css('display','block');
     }
     $('#user_role').change(function(){
        if($(this).val() != "Student"){
          $("#student_fields").css('display','none');
        }
        else{
          $("#student_fields").css('display','block');
        }
     })
  });
  $(document).ready(function(){
       if($('#user_role').val() != "Teacher"){
          $("#teacher_fields").css('display','none');
       }
       else{
          $("#teacher_fields").css('display','block');
       }
       $('#user_role').change(function(){
          if($(this).val() != "Teacher"){
            $("#teacher_fields").css('display','none');
          }
          else{
            $("#teacher_fields").css('display','block');
          }
       })
    });
  $(document).ready(function(){
     if($('#user_role').val() != "Admin"){
        $("#admin_fields").css('display','none');
     }
     else{
        $("#admin_fields").css('display','block');
     }
     $('#user_role').change(function(){
        if($(this).val() != "Admin"){
          $("#admin_fields").css('display','none');
        }
        else{
          $("#admin_fields").css('display','block');
        }
     })
  });
</script>