jQuery表单中选择项的自动隐藏问题。

WEB框架是Rails，jQuery库，设计的是一个大学校园微博系统。
在填写个人资料的页面，我设计了一个“角色”选择选项，当选择“学生”时，只呈现学号、年级、学院、专业等填写项，当选择教师时，学号、年级项会自动隐藏，只呈现学院、专业项。
这是代码（有些选项还只放了个标签）：

<div id="role">
    <label>在校身份</label>
    <%= f.select :role_id, Role.all.map {|r| [r.role_name, r.id]}, {} %>
</div>
<hr>

<div id="student">
    <label>入学年份</label>
    <%= f.date_select :grade, :start_year => Time.now.year - 7, :end_year => Time.now.year, :discard_day => true, :discard_month => true %>

    <label>学号</label>
    <%= f.number_field :student_ID, :maxlength => 9999999999 %>
</div>

<div id="together">
    <label>学院</label>
    <%= f.select :department_id, Department.all.map {|d| [d.department_name, d.id]}, {} %>

    <label>专业</label>
</div>

<div id="student">
    <label>班级</label>
</div>

<div id="worker">
    <label>职务</label>
</div>

这是js代码：

$(document).ready(function() {
    $("div#role select").change(function(){
        $("select#user_role_id option:selected").each(function(){
            if ($(this).text() == "教师") {
                $("div#worker").hide();
                $("div#student").hide();
                $("div#together").show();
            }
            else
            {
               if ($(this).text() == "学生") {
                        $("div#worker").hide();
                        $("div#student").show();
                        $("div#together").show();
                }
                else
                {
                    $("div#worker").show();
                    $("div#student").hide();
                    $("div#together").hide();
                }
            }
        });
    });
});

问题是，当这个页面被加载时，所有的选择项都会显示在页面上

本人今天下午才刚刚开始看了半天js的书，纯新人，这个问题该怎么解决？