??博主：初映CY的前說(前端領(lǐng)域) ,??本文核心：用原生js實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)

【前言】今日在復(fù)習(xí)省市縣三級聯(lián)動(dòng)的時(shí)候，有點(diǎn)忘了原生的js應(yīng)該怎么樣處理省市縣的聯(lián)動(dòng)，特此寫下來再次復(fù)習(xí)下

?實(shí)現(xiàn)思路

• 1.獲取相對應(yīng)的DOM對象
• 2.寫省市縣接口獲取到接口信息
• 3.寫下change事件，有變化時(shí)調(diào)用接口

?思路轉(zhuǎn)化為代碼

1.獲取相對應(yīng)的DOM對象

首先的話，我們先寫一下靜態(tài)的頁面結(jié)構(gòu)
（以下是關(guān)鍵代碼）

            <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="">--區(qū)/縣--</option>
                </select>
              </div>
            </div>

用js獲取相對應(yīng)的DOM

//   三省聯(lián)動(dòng)dom節(jié)點(diǎn)的獲取
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=""> --區(qū)/縣-- </option>` + data.map(item => `<option value="${item}"> ${item} </option>`).join('')
}

注意點(diǎn)：option的值是通過value獲取，map需要與joio一起使用（map返回值是產(chǎn)生新的數(shù)組，join將與其拼接）

3.寫下change事件，有變化時(shí)調(diào)用接口

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

注意點(diǎn)：注意聯(lián)級調(diào)用，一層層的觸發(fā)的呦。

? 效果查看

至此本文結(jié)束，愿你有所收獲！
期待大家的關(guān)注與支持! 你的肯定是我更新的最大動(dòng)力！??！文章來源地址http://www.zghlxwxcb.cn/news/detail-424122.html

到了這里，關(guān)于【JavaScript】原生js實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！