<!DOCTYPE html> <html> <head> <title>完成省城市的三级联动(包括湖南省),附代码和效果图。</title> </head> <body> <select id="province"> <option value="-1">请选择</option> </select> <select id="city"></select> <select id="country"></select> <script type="text/javascript"> var provinceArr = [‘上海‘,‘江苏‘,‘河北‘,‘湖南‘]; var cityArr = [ [‘上海市‘], [‘苏州市‘,‘南京市‘,‘扬州市‘], [‘石家庄‘,‘秦皇岛‘,‘张家口‘], [‘长沙市‘,‘株洲市‘,‘湘潭市‘] ]; var countryArr =[ [ [‘黄浦区‘,‘静安区‘,‘长宁区‘,‘浦东区‘] ], [ [‘虎丘区‘,‘吴中区‘,‘相城区‘,‘姑苏区‘,‘吴江区‘], [‘玄武区‘,‘秦淮区‘,‘建邺区‘,‘鼓楼区‘,‘浦口区‘], [‘邗江区‘,‘广陵区‘,‘江都区‘] ], [ [‘长安区‘,‘桥西区‘,‘新华区‘,‘井陉矿区‘], [‘海港区‘,‘山海关区‘,‘北戴河区‘,‘抚宁区‘], [‘桥东区‘,‘桥西区‘,‘宣化区‘,‘下花园区‘] ], [ [‘芙蓉区‘,‘岳麓区‘,‘天心区‘,‘开福区‘], [‘荷塘区‘,‘芦淞区‘,‘石峰区‘,‘天元区‘], [‘雨湖区‘,‘岳塘区‘] ] ]; function creatOption(obj,data){ for(var i in data){ var op = new Option(data[i],i); obj.options.add(op); } } var province = document.getElementById(‘province‘); creatOption(province,provinceArr); var city = document.getElementById("city"); province.onchange = function(){ city.options.length = 0; creatOption(city,cityArr[province.value]); if(province.value >= 0){ city.onchange(); }else{ country.options.length = 0; } }; var country = document.getElementById("country"); city.onchange = function(){ country.options.length = 0; creatOption(country,countryArr[province.value][city.value]); }; </script> </body> </html>
原文地址:https://www.cnblogs.com/chenqintaotao/p/11658772.html
时间: 2024-10-09 19:06:43