今天主要要去修改新发布页面的关联课程的选择方式

现在的选择关联课程是将所有课程列出,让用户选择,但是当课程多时,用户体验就会不好:

2018/5/28 山东大学学习资源聚合平台工作

我们想要做出选择类型的,让用户先选择学院,再选专业,最后找到想要的课程:下面是成果图:

2018/5/28 山东大学学习资源聚合平台工作

2018/5/28 山东大学学习资源聚合平台工作

分别有三个div:学院、专业、课程,然后通过绑定select的change事件,向后台方式AJAX请求,渲染下一步的div:

2018/5/28 山东大学学习资源聚合平台工作

先拿到select对象,得到选定的option的值,发往controlller:

2018/5/28 山东大学学习资源聚合平台工作

找到学院所属的专业,然后渲染render_speciality.js.erb:

2018/5/28 山东大学学习资源聚合平台工作

为了专业改变时Course能回归原状,同时将coursediv设空:

同样处理speciality到course的过程,得到如下效果:

2018/5/28 山东大学学习资源聚合平台工作

需要注意的是,需要获得已经选择了的课,并对该专业下的课程与已选课求差集,得到最后要显示的课程,来避免重复选择课程:

2018/5/28 山东大学学习资源聚合平台工作

相关文章:

  • 2021-07-31
  • 2021-04-30
  • 2021-06-25
  • 2022-01-08
  • 2021-05-11
  • 2021-12-20
  • 2021-05-05
  • 2021-08-05
猜你喜欢
  • 2022-01-07
  • 2021-07-29
  • 2021-10-22
  • 2021-04-25
  • 2022-01-11
  • 2022-01-22
  • 2021-04-20
相关资源
相似解决方案