综合案例 --- 省市区下拉框三级联动

1. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width: 100px;
        }
    </style>
</head>
<body>
<div>
    <span style="margin-right: 10px">地区选择</span>
    <select name="" id="province">
        <option value="">省份</option>
    </select>
    <select name="" id="city">
        <option value="">城市</option>
    </select>
    <select name="" id="area">
        <option value="">地区</option>
    </select>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 获取省份列表
    function getProvinceData() {

        axios({
            url: "http://hmajax.itheima.net/api/province"
        }).then(result => {
            const pList = result.data.list
            document.querySelector("#province").innerHTML = `<option value="">省份</option>` + pList.map(pname => {
                return `<option value="${pname}">${pname}</option>`
            }).join('')
        })
    }

    getProvinceData()

    // 当用户选择省份后获取城市列表
    document.querySelector("#province").addEventListener("change", async e => {
        // 当用户重新选择省份时,要将地区的选项清空
        document.querySelector("#area").innerHTML = `<option value="">地区</option>`
        const result = await axios({url: "http://hmajax.itheima.net/api/city", params: {pname: e.target.value}})
        const cList = result.data.list
        document.querySelector("#city").innerHTML = `<option value="">城市</option>` + cList.map(cname => {
            return `<option value="${cname}">${cname}</option>`
        }).join('')
    })

    // 当用户选择城市后获取地区列表
    document.querySelector("#city").addEventListener("change", async e => {
        const result = await axios({
            url: "http://hmajax.itheima.net/api/area",
            params: {pname: document.querySelector("#province").value, cname: e.target.value}
        })
        const aList = result.data.list
        document.querySelector("#area").innerHTML = `<option value="">地区</option>` + aList.map(aname => {
            return `<option value="${aname}">${aname}</option>`
        }).join('')
    })
</script>
</body>
</html>
posted @ 2024-06-05 20:06  河图s  阅读(26)  评论(0)    收藏  举报