三级联动(js)

最新推荐文章于 2025-03-20 15:38:01 发布
Cc.＇沐艿伊℡
最新推荐文章于 2025-03-20 15:38:01 发布
阅读量245
点赞数 1
分类专栏： web
本文链接：https://blog.youkuaiyun.com/qq_44899153/article/details/93921877
版权
web 专栏收录该内容
53 篇文章
订阅专栏
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height:40px;
            border-radius:10px;
            box-shadow:0 0 5px #ccc;
            position:relative;
            display:inline-block;
            padding:0 20px;
        }
        select {
            border:none;
            /* //清除select聚焦时候的边框颜色 */
            outline:none;
            /* //将select的宽高等于div的宽高 */
            width:100%;
            height:40px;
            /* //隐藏select的下拉图标 */
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding:0 10px;
        }
        div:after {
            content:"↓";
            position:absolute;
            right:3px;
            top:50%;
            transform:translateY(-50%);
            pointer-events:none;
        }
    </style>
</head>
<body>
<section>
    <div>
        <select name="province" id="Province"></select>
    </div>
    <div>
        <select name="citiesArr" id="Cities"></select>
    </div>
    <div>
        <select name="counties" id="Counties"></select>
    </div>
</section>
<script>

    var prosArr = ["广东", "广西", "宁夏", "四川"]
    var citiesArr = [
        ['广州市', '韶关市', '深圳市', '珠海市'],
        ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
        ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
        ['成都市', '自贡市']
    ]
    var conutiesArr = [
        [
            ['东山区', '荔湾区', '越秀区', '海珠区', '天河区', '芳村区', '白云区', '黄埔区', '番禺区', '花都区', '增城市', '从化市'],
            ['武江区', '浈江区', '曲江区', '始兴县', '仁化县', '翁源县', '乳源瑶族自治县', '新丰县', '乐昌市', '南雄市'],
            ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区'],
            ['香洲区', '斗门区', '金湾区']
        ],
        [
            ['兴宁区', '青秀区', '江南区', '西乡塘区', '良庆区', '邕宁区', '武鸣县', '隆安县', '马山县', '上林县', '宾阳县', '横　县'],
            ['城中区', '鱼峰区', '柳南区', '柳北区', '柳江县', '柳城县', '鹿寨县', '融安县', '融水苗族自治县', '三江侗族自治县'],
            ['秀峰区', '叠彩区', '象山区', '七星区', '雁山区', '阳朔县', '临桂县', '灵川县', '全州县', '兴安县', '永福县', '灌阳县', '龙胜各族自治县', '资源县', '平乐县', '荔蒲县', '恭城瑶族自治县'],
            ['万秀区', '蝶山区', '长洲区', '苍梧县', '藤　县', '蒙山县', '岑溪市'],
            ['海城区', '银海区', '铁山港区', '合浦县'],
            ['港口区', '防城区', '上思县', '东兴市'],
            ['钦南区', '钦北区', '灵山县', '浦北县'],
            ['港北区', '港南区', '覃塘区', '平南县', '桂平市'],
            ['玉州区', '容　县', '陆川县', '博白县', '兴业县', '北流市'],
            ['右江区', '田阳县', '田东县', '平果县', '德保县', '靖西县', '那坡县', '凌云县', '乐业县', '田林县', '西林县', '隆林各族自治县'],
            ['八步区', '昭平县', '钟山县', '富川瑶族自治县'],
            ['金城江区', '南丹县', '天峨县', '凤山县', '东兰县', '罗城仫佬族自治县', '环江毛南族自治县', '巴马瑶族自治县', '都安瑶族自治县', '大化瑶族自治县', '宜州市'],
            ['兴宾区', '忻城县', '象州县', '武宣县', '金秀瑶族自治县', '合山市'],
            ['江洲区', '扶绥县', '宁明县', '龙州县', '大新县', '天等县', '凭祥市']
        ],
        [
            ['兴庆区', '西夏区', '金凤区', '永宁县', '贺兰县', '灵武市'],
            ['大武口区', '惠农区', '平罗县'],
            ['利通区', '盐池县', '同心县', '青铜峡市'],
            ['原州区', '西吉县', '隆德县', '泾源县', '彭阳县', '海原县'],
            ['沙坡头区', '中宁县']
        ],
        [
            ['锦江区', '青羊区', '金牛区', '武侯区', '成华区', '龙泉驿区', '青白江区', '新都区', '温江县', '金堂县', '双流县', '郫　县', '大邑县', '蒲江县', '新津县', '都江堰市', '彭州市', '邛崃市', '崇州市'],
            ['自流井区', '贡井区', '大安区', '沿滩区', '荣　县', '富顺县']
        ]
    ]
    function id$(x){
        return document.getElementById(x);
    }
    //遍历的初始化省份数据
    change(id$("Province"),prosArr);
    change(id$("Cities"),citiesArr[0]);
    change(id$("Counties"),conutiesArr[0][0]);
    //绑定change事件
    var index1=0;
    id$("Province").onchange = function (){
        var index = this.selectedIndex;
        change(id$("Cities"),citiesArr[index]);
        change(id$("Counties"),conutiesArr[index][0]);
        index1=index;
    }
    id$("Cities").onchange = function (){
        var index = this.selectedIndex;
        change(id$("Counties"),conutiesArr[index1][index]);
    }
    function change(b,c){
        //添加前先删除sp
                b.innerHTML = "";
                //遍历的添加城市数据
                for(var i=0;i<c.length;i++){
                    var sp = document.createElement("option");
                    sp.innerText =c[i];
                    b.appendChild(sp);
                }
    }
</script>
</body>
</html>