使用jQuery实现三级联动

卖萌_先森

已于 2022-04-21 09:25:38 修改

阅读量2.1k

点赞数 1

分类专栏： jQuery 文章标签： jQuery 三级联动

于 2019-07-03 20:53:22 首次发布

本文链接：https://blog.csdn.net/qq_36949892/article/details/94589921

版权

本文介绍了如何使用jQuery实现三级联动效果，通过数据数组和selectedIndex方法，结合change事件监听，实现联动的三个关键步骤：初始化页面数据，记录索引值，以及动态渲染select选项。

摘要由CSDN通过智能技术生成

三级联动的设计

首先这是我的数据数组

var prosArr = ["广东", "广西", "宁夏", "四川"]
    var citiesArr = [
        ['广州市', '韶关市', '深圳市', '珠海市'],
        ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
        ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
        ['成都市', '自贡市']
    ]
    var conutiesArr = [
        [
            ['东山区', '荔湾区', '越秀区', '海珠区', '天河区', '芳村区', '白云区', '黄埔区', '番禺区', '花都区', '增城市', '从化市'],
            ['武江区', '浈江区', '曲江区', '始兴县', '仁化县', '翁源县', '乳源瑶族自治县', '新丰县', '乐昌市', '南雄市'],
            ['罗湖区', '福田区',