一、项目需求
单独的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