模拟数据从网上摘抄的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <select id="selProvince"> <option>--请选择--</option> </select> <select id="selCity"> <option>--请选择--</option> </select> <select id="selCounty"> <option>--请选择--</option> </select> </body> <script src="./jquery.js"></script> <script> $(function () { var aProvince = ["河北省", "山西省", "湖北省"]; var aCity = [ ["石家庄市", "张家口市", "承德市", "秦皇岛市"], ["太原市", "朔州市", "大同市", "阳泉市"], ["武汉市", "孝感市", "宜昌市", "襄阳市"] ]; var aCounty = [ [ ["无极县", "赵县", "栾城县"], ["沽源县", "尚义县", "阳原县"], ["平泉县", "滦平县", "隆化县"], ["抚宁县", "卢龙县", "昌黎县"] ], [ ["清徐县", "阳曲县", "娄烦县"], ["山阴县", "应县", "右玉县"], ["左云县", "阳高县", "天镇县"], ["盂县", "平定县", "矿区"] ], [ ["武昌区", "洪山区", "东湖新区"], ["云梦县", "大悟县", "应城市"], ["秭归县", "远安县", "枝江市"], ["枣阳市", "老河口市", "谷城县"] ] ]; aProvince.forEach(function (value, index) { $('#selProvince').append('<option>' + value + '</option>') }) $('#selProvince').change(function () { var index_province = $(this).children('option:selected').index() var arr = aCity.filter((item, index) => index === index_province - 1)[0] $('#selCity>option:gt(0)').remove() $('#selCounty>option:gt(0)').remove()
if(index_province !== 0) { arr.forEach(function (value, index) { $('#selCity').append('<option>' + value + '</option>') })
} $('#selCity').change(function () { var index_city = $(this).children('option:selected').index() var arr1 = aCounty.filter((item, index) => index === index_province - 1)[0] var arr2 = arr1.filter((item, index) => index === index_city - 1)[0] $('#selCounty>option:gt(0)').remove()
if(index_city !== 0){ arr2.forEach(function (value, index) { $('#selCounty').append('<option>' + value + '</option>') })
} }) }) }) </script> </html>