移动端项目-校友信息采集页面

一、项目需求

  单独的H5页面，针对移动端设备，通过表单采集数据以json文件传送到后台，表单内容包括：入学年份–>学历–>专业–>班级四级级联选择框，采集姓名、手机号、行业、工作单位、微信等输入框。并且设置相应的表单验证。当数据提交成功后，弹出提示框，并返回上一页。

二、问题与解决

  最主要的问题是四级级联表单的逻辑问题，以及json数据的提取。后台已经用python处理了相应的excel表格，生成了对应的json文件，前端的工作就是分级提取对应的数据填充到相应的select表单中。
　　
与之类似的级联，请参考如下：https://blog.csdn.net/jy02988278/article/details/78968997

  在这里只展示JS部分代码。首先，用ajax调用本地的json数据：

var url='./res/data.json';
$.post(url, function(res){
   
        //console.log(res);
        var res1 = res.Year
        $.each(res1, function(index,element) {
   
            $('.year').append("<option value='" + index + "'>" + element.value + " </option>");
        });
    })

  Year为入学年份的key，value为该年份的数据数组。先为第一个表单填充年份数据。
　　当用户点击第一个表单选择时，开始生成第二个表单，学历表单。分别取到该年份相应的学历数组，如Gao、Zhuan、Ben、Yan分别代表高职、专科、本科、研究生学历。当判断该年份中，学历数组长度大于1时，则添加相应的学历option。

$("#sel1").change(function(){
   
        //console.log($(this).val());
        //获取当前（第一个）select的value值，即年份的索引值
        yearId = $(this).val();
        $('.edu').empty();
        $('.major').empty();
        $('.ban').empty();
        $.post(url, function(res){
   
            Gao = res.Year[yearId].Gao;
            Zhuan = res