参考文章：
https://blog.csdn.net/weixin_29414291/article/details/8004412da
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery案例之省市联动</title> <!-- 导入JQ的文件 --> <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> <script type="text/javascript"> // 准备数据 var provinces = [ [ "海淀区", "昌平区", "朝阳区", "顺义区", "怀柔区", "大兴区", "东城区", "西城区" ], [ "太原", "大同", "晋中", "临汾", "运城", "吕梁" ], [ "石家庄", "保定", "邯郸", "衡水", "沧州", "承德", "张家口", "秦皇岛", "唐山" ], [ "郑州", "开封", "洛阳", "驻马店", "三门峡", "周口" ] ]; // 文档加载完成后执行jQuery方法 $(function(){ $("#province").change(function(){ // alert(this.value); // 得到每个省份包含的城市信息 var cities = provinces[this.value]; // 采用JQ的方式清空城市select中的option $("#city").empty(); // 遍历城市 $(cities).each(function(i, n) { $("#city").append("<option>" + n + "</option>"); }); }); }); </script> </head> <body> <select id="province"> <option value="-1">--请选择省份--</option> <option value="0">北京</option> <option value="1">山西</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </body> </html>效果图如下：
