这里只是提供一个思路,具体看代码,这里将动态生成option列表封装成函数, 方便复用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动案例</title> </head> <body> <form action="" method=get> <select name="" id="pre" οnchange='chg(this)'> <option value="-1">请选择省份</option> </select> <select name="" id="city" οnchange='chg2(this)'> <option value="" selected>请选择城市</option> </select> <select name="" id="area"> <option value="" selected>区/县</option> </select> </form> </body> <script> var pres = ["北京", "上海", "山东"]; var cities = [ ["东城", "昌平", "海淀"], ["浦东", "高区"], ["济南", "青岛"] ]; var areas = [ [ ["东城1", "东城2", "东城3"], ["昌平1", "昌平2", "昌平3"], ["海淀1", "海淀2", "海淀3"] ], [ ["浦东1", "浦东2", "浦东3"], ["高区1", "高区2", "高区3"] ], [ ["济南1", "济南2"], ["青岛1", "青岛2"] ] ] var pIndex = -1; // 获取下拉框 var preEle = document.getElementById('pre'); var cityEle = document.getElementById('city'); var areaEle = document.getElementById('area'); // 遍历省份 generateOption(pres, preEle); // 省级下拉框改变触发事件 function chg(obj) { // 如果等于默认option,清空后二级 if (obj.value == -1) { cityEle.options.length = 0; areaEle.options.length = 0; } var val = obj.value; pIndex = obj.value; // 城市列表 var cs = cities[val]; // 区县列表 var as = areas[val][0]; cityEle.options.length = 0; areaEle.options.length = 0; generateOption(cs, cityEle); generateOption(as, areaEle); } // 市级下拉框改变触发事件 function chg2(obj) { // 返回下拉列表中被选选项的索引号 var val = obj.selectedIndex; var as = areas[pIndex][val]; areaEle.options.length = 0; generateOption(as, areaEle); } /* 动态生成option {arr: Array} 获取dee数组 {oldArr: element} 要动态添加的元素 */ function generateOption(arr, oldArr) { arr.forEach(function (val, i) { var op = new Option(arr[i], i); oldArr.options.add(op) }) } </script> </html>