开发者社区> 问答> 正文

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

小旋风柴进 2016-03-24 11:31:04 883

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的书,纯新人,这个问题该怎么解决?

JavaScript Ruby
分享到
取消 提交回答
全部回答(2)
  • 一生有你llx
    2019-07-17 19:12:27

    看 js 代码, 只是在页面加载的时候 定义了 select 的 change 事件, 你需要在页面加载之后 主动触发以下 change 事件$("div#role select").trigger('change');

    0 0
  • 小旋风柴进
    2019-07-17 19:12:27

    看 js 代码, 只是在页面加载的时候 定义了 select 的 change 事件, 你需要在页面加载之后 主动触发以下 change 事件$("div#role select").trigger('change');

    0 0
添加回答

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程