省市县联动数据请求

             <div class='addModal'>
                <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>

省市区的三级联动,当点击省的时候,市会根据省中的值会自动获取匹配对应的市,选择市后会自动获取县一级.

let select1 = document.querySelector(`.addModal [name="province"]`)
axios({
        method: 'get',
        url: '/geo/province' 
    }).then(({ data: res }) => {
    select1.innerHTML = `<option selected value="">--省--</option>` + res.map((item) => 
    `<option value="${item}">${item}</option>`).join('')  
    //这里还可以用一个空数组将遍历的值存储起来,将字符串合并渲染到页面也能达到相同效果,如下所示
    
        //    let arr = ['<option  value="">--省--</option>']
        //    res.forEach(item => {
        //    arr.push(`<option value="${item}">${item}</option>`)
        //    });
        //    arr.push(res.map((item)=>`<option selected value="${item}">${item}</option>`))
        //    console.log(arr);

        //    select1.innerHTML=arr.join('')
      })

接下来处理市一级

let select2 = document.querySelector(`.addModal [name="city"]`)
//注意,市是在省选择之后才能产生数据,并且每次选择改变都会获取对应的市一级数据,而县一级则会回到初始状态
select1.onchange = function () {
//这个必须要在判断之前,如果在判断中,只会有一种情况
 select3.innerHTML = `<option selected value="">--县--</option>`
 if (select1.value == '') {
        //当省的内容为空的时候,市的内容应该为空,为初始值
            select2.innerHTML = `<option selected value="">--市--</option>`
             return
        }axios({
            url: '/geo/city',
            //注意这里需要传值
            params: { pname: select1.value }
        }).then(({ data: res }) => {
            select2.innerHTML = `<option selected value="">--市--</option>` + res.map((item) =>
            `<option value="${item}">${item}</option>`).join('')
        })
    }

//县一级事件处理

let select3 = document.querySelector(`.addModal [name="county"]`)
select2.onchange = function () {
//先进性非空判断,当市的内容为空的时候,县的内容为空
        if (select2.value == '') {
            select3.innerHTML = `<option selected value="">--县--</option>`
            return
        } axios({
            url: '/geo/county',
            //注意这里需要传值
            params: {
                pname: select1.value, //省份
                cname: select2.value  //市名称
            }
        }).then(({ data: res }) => {
            select3.innerHTML = `<option selected value="">--县--</option>` + res.map((item) => 
            `<option value="${item}">${item}</option>`).join('')
        })
    }