0
点赞
收藏
分享

微信扫一扫

Apache Flink

阿尚青子自由写作人 2023-05-01 阅读 55

😉博主:初映CY的前说(前端领域) ,📒本文核心:用原生js实现省市区联动

目录

⭐实现思路

  • 1.获取相对应的DOM对象
  • 2.写省市县接口获取到接口信息
  • 3.写下change事件,有变化时调用接口

⭐思路转化为代码

1.获取相对应的DOM对象

首先的话,我们先写一下静态的页面结构
(以下是关键代码)

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">籍贯</label>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="province">
                  <option selected value="">----</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="city">
                  <option selected value="">----</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="county">
                  <option selected value="">--/--</option>
                </select>
              </div>
            </div>

用js获取相对应的DOM

//   三省联动dom节点的获取
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const county = document.querySelector('[name="county"]')

2.写省市县接口获取到接口信息

const getProvince = async () => {
    const { data } = await axios.get('/geo/province')
    console.log(data);
    province.innerHTML = `<option value=""> --省份-- </option>` + data.map(item => `<option value="${item}"> ${item} </option>`).join('')
}
const getCity = async () => {
    const { data } = await axios.get(`/geo/city?pname=${province.value}`)
    console.log(data);
    city.innerHTML = `<option value=""> --市-- </option>` + data.map(item => `<option value="${item}"> ${item} </option>`).join('')
}
const getCounty = async () => {
    const { data } = await axios.get(`/geo/county?pname=${province.value}&cname=${city.value}`)
    console.log(data);
    county.innerHTML = `<option value=""> --区/县-- </option>` + data.map(item => `<option value="${item}"> ${item} </option>`).join('')
}

注意点:option的值是通过value获取,map需要与joio一起使用(map返回值是产生新的数组,join将与其拼接)

3.写下change事件,有变化时调用接口

//  change事件
province.addEventListener('change', function () {
    getCity()
    county.innerHTML = `<option value=""> --区/县-- </option>`
})
// 市change事件
city.addEventListener('change', function () {
    getCounty()
})

注意点:注意联级调用,一层层的触发的呦。

⭐ 效果查看

举报

相关推荐

0 条评论