layui省市区三级联动

地区选择

//这是js代码

// 获取省

$.get(“http://47.92.92.156:336/api/area/area”,

function(data, status) {

console.log(‘data’, data);

// 动态渲染下来框

let seleData = data.code;

for (var i = 0; i < seleData.length; i++) {

console.log(‘进入’);

let option = document.createElement(“option”);

option.setAttribute(“value”, seleData[i].id);

option.innerText = seleData[i].name;

$(‘select[name=province]’).append(option);

};

//渲染下拉框

form.render(“select”);

// 获取省份下拉框

form.on(‘select(province)’, function(proData) {

// 获取到省份id

let value = $(‘select[name=province]’).val();

// 把省份id传过去

province(value);

});

// 省区获取到了默认执行获取市区

}).done(function(data){

// 默认传省份

let value = $(‘select[name=province]’).val();

// 默认执行一次

province(value);

});

// 获取市

function province(data){

console.log(‘市区’,data);

$.get(“http://47.92.92.156:336/api/area/area”,{province:data},

function(data, status) {

console.log(‘data’, data);

// 删除子元素

$(‘select[name=city]’).children().remove();

// 动态渲染下来框

let seleData = data.code;

for (var i = 0; i < seleData.length; i++) {

let option = document.createElement(“option”);

option.setAttribute(“value”, seleData[i].id);

option.innerText = seleData[i].name;

$(‘select[name=city]’).append(option);

};

//渲染下拉框

form.render(“select”);

// 渲染市区下拉框

form.on(‘select(city)’, function(proData) {

// 默认传省份

let proval = $(‘select[name=province]’).val();

// 默认传市区

let cityval = $(‘select[name=city]’).val();

console.log(‘val’,value);

// 默认执行一次

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。