下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区、品种等有多级选项时。例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变。

省市联动效果

思路:

1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化。

下面是造的省市的数据:

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "请选择"
                ],
                1:[
                    "朝阳区",
                    "海淀区",
                    "东城区",
                    "西城区",
                    "房山区",
                    "其他"
                ],
                2:[
                    "天津"
                ],
                3:[
                    "沧州",
                    "石家庄",
                    "秦皇岛",
                    "其他"
                ],
                4:[
                    "武汉市",
                    "宜昌市",
                    "襄樊市",
                    "其他"
                ],
                5:[
                    "广州市",
                    "深圳市",
                    "汕头市",
                    "佛山市",
                    "珠海市",
                    "其他"
                ],
                6:[
                    "其他"
                ]
            }
            };
View Code

相关文章: