[省市区三级联动选择框]

最新推荐文章于 2024-02-23 14:16:29 发布

m0_63466615

最新推荐文章于 2024-02-23 14:16:29 发布

阅读量484

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63466615/article/details/121053887

版权

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style/index.css">
    <script type="text/javascript" src="js/common.js"></script>

//common.js封装了两个函数,

let $=selector=>document.querySelector(selector);

let $$=selector=>document.querySelectorAll(selector);
    <script type="text/javascript" src="js/data.json"></script>
</head>
<body>
    省市区: <select name="province" >
                <option selected disabled>请选择省份</option>
            </select>
            <select name="city" >
                <option selected  disabled>请选择城市</option>
            </select>
            <select name="area" >
                <option selected disabled>请选择区县</option>
            </select>

    选择的省市区:     <span class="province"></span>|
                    <span class="city"></span>|
                    <span class="area"></span>

    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

2.JS代码

//定义两个全局变量,用来获取value值,在省里获取province的value值,在城市里获取city里边的值

let provinceName,cityName;

//遍历china生成option元素节点,并把opction节点的的文本设置为chian的name属性,把option的value设置为索引值
china.forEach((item,index)=>{
        let provOp=document.createElement("option")    ;
        provOp.innerText=item["name"];    
        provOp.setAttribute("value",index);
        $("select[name=province]").append(provOp);
    })

// 点击省的下拉框 
$("select[name=province]").addEventListener("input",function(){
    provinceName=this.value  //选中的省的索引值
    // 复制第一个元素节点,就是请选择省份,和请选择城市
    let firCon=$("select[name=city]").firstElementChild.cloneNode(true);
    let secCon=$("select[name=area]").firstElementChild.cloneNode(true);
    // 把原有option覆盖掉,设置为空
    $("select[name=city]").innerHTML="";
    $("select[name=area]").innerHTML="";
    // 把第一个放进去,就是请选择省份,和请选择城市的默认选项
    $("select[name=city]").append(firCon)
    $("select[name=area]").append(secCon)
    // 遍历china，创建option元素节点，再把option放进去
    china[this.value].city.forEach((item,index)=>{
        let cityOp=document.createElement("option");
        cityOp.innerText=item["name"];
        cityOp.setAttribute("value",index);
        $("select[name=city]").append(cityOp)
    })

//设置span里边的文字,就是把china所选中的索引值对应的数组成员的name属性,由于,数组成员是对象,所以对象采用点语法来引用,数组就采用下标来引用


    $(".province").textContent=china[provinceName].name;
    $(".city").textContent="";
    $(".area").textContent="";
})
// 点击市的下拉框
$("select[name=city]").addEventListener("input",function () {
    cityName=this.value
    // 复制第一个
    let fisCon=$("select[name=area]").firstElementChild.cloneNode(true);
    // 删除原有的
    $("select[name=area]").innerHTML="";
    // 把第一个放进去
    $("select[name=area]").append(fisCon)
    china[this.previousElementSibling.value].city[this.value].area.forEach((item,index)=>{
        let areaOp=document.createElement("option");
        areaOp.innerText=item["name"];
        areaOp.setAttribute("value",index);
        $("select[name=area]").append(areaOp)
    })
    $(".city").textContent=china[provinceName].city[cityName].name;
    $(".area").textContent="";
})
// 选中区县的下拉框
$("select[name=area]").addEventListener("input",function(){
    $(".area").textContent=china[provinceName].city[cityName].area[this.value].name    
})