CMD可视化案列总结二

reset() 重置表单恢复默认值

bootstrap 插件，  关闭模态框

#modal是模态框

.g-3是 X号 关闭按钮  

   document.querySelector(`#modal`).addEventListener('show.bs.modal', function () {
        document.querySelector(`.g-3`).reset()
      })
    }

男女判断方法一

 if (res.gender == 0) {
   //cb01男
   document.querySelector(`#cb01`).checked = true
 } else {
   //cb02女
   document.querySelector(`#cb02`).checked = true
 }

男女判断 方法二

for (let i = 0; i < gender.length; i++) {
  if (gender[i].value == res.gender) {
    gender[i].checked = true
  } else {
    gender[i].checked = false
  }
}

修改模态框 

城市

 axios({
   url: '/api/city',
   method: 'get',
   params: {
     pname: res.province
   }, // 查询参数
 }).then(({ data: res1 }) => {
   // 判断业务状态码是否为 0
   document.querySelector(`[name="city"]`).innerHTML = `<option value="">--城市--</option>`
   document.querySelector(`[name="city"]`).innerHTML += res1.map(item => { return `<option value="${item}">${item}</option>` }).join
('')
   document.querySelector(`[name="city"]`).value = res.city
 });

地区

axios({
  url: '/api/area',
  method: 'get',
  params: {
    pname: res.province,
    cname: res.city
  }, // 查询参数
}).then(({ data: res2 }) => {
  // 判断业务状态码是否为 0
  document.querySelector(`[name="area"]`).innerHTML += res2.map(item => { return `<option value="${item}">${item}</option>` }).join
('')
  document.querySelector(`[name="area"]`).value = res.area
});

添加模态框

省份城市注册 change 事件

    // 给省份注册change事件
    prce.addEventListener(`change`, function () {
      city.innerHTML = `<option value="">-- 城市 --</option>`
      area.innerHTML = `<option value="">-- 地区 --</option>`
      axios({
        url: '/api/city',
        method: 'get',
        params: {
          pname: this.value
        }
      }).then(({ data: res }) => {
        console.log(res);
        // 判断业务状态码是否为 0
        document.querySelector(`[name="city"]`).innerHTML += res.map(item => { return `<option value="${item}">${item}</option>` }).join('')
      });
    })


    // 城市
    city.addEventListener(`change`, function () {
      axios({
        url: '/api/area',
        method: 'get',
        params: {
          pname: prce.value,
          cname: city.value
        }
      }).then(({ data: res }) => {
        console.log(res);
        // 判断业务状态码是否为 0
        if (res !== undefined) {
          document.querySelector(`[name="area"]`).innerHTML += res.map(item => { return `<option value="${item}">${item}</option>` }).join('')
        } else {
          show('当前地区不存在');
        }
      });
    })