原生js写三级联动 java_原生js实现三级联动

// 数据通常由后台返回，结构如下：

var citys = [

{ "name": "北京", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"] }] },

{ "name": "天津", "city": [{ "name": "天津", "area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟 县"] }] }

]

// 具体实现

// 获取省

var province = document.getElementById('province');

province.options[0] = new Option('请选择省', -1)

// 获取市

var city = document.getElementById('city');

city.options[0] = new Option('请选择市', -1)

// 获取县

var county = document.getElementById('county');

county.options[0] = new Option('请选择县', -1)

citys.forEach(function (item, index) {

// 添加省

province.options[province.options.length] = new Option(item.name, index);

// 给省绑定事件

province.onchange = function () {

// 获取选择的省

var provinceValue = province.value;

// 首先清空市和区县

city.options.length = 0;

city.options[city.options.length] = new Option('请选择市', -1);

county.options.length = 0;

county.options[county.options.length] = new Option('请选择县', -1)

// 判断是否是‘请选择’

if (province.value !== '-1') {

// 然后给对应的省添加市

citys[provinceValue].city.forEach(function (item, index) {

city.options[city.options.length] = new Option(item.name, index);

// 给市绑定事件

city.onchange = function () {

// 获取选择的市

var cityValue = city.value;

// 清空县

county.options.length = 0;

county.options[county.options.length] = new Option('请选择县', -1);

// 判断选择的市是否是‘请选择’

if (cityValue !== '-1') {

// 设置市对应的县

citys[provinceValue].city[cityValue].area.forEach(function (item, index) {

county.options[county.options.length] = new Option(item, index);

})

}

}

})

}

}

})