目录

• 💂 个人主页: 爱吃豆的土豆
• 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
• 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

• 🏆人必有所执，方能有所成！

• 🐋希望大家多多支持😘一起进步呀！

省市二级联动（后续三级联动）

---

省市二级联动（后续三级联动）

分析：

关键点：

1. 域的值被改变时： onchange

1. 数据源是二维数组。(取值方式等同于java)

 

1. 下拉框内容体改变。innerHTML="";

步骤：

//1、页面加载完成时，为省 下拉框绑定 onchange事件

//2、onchange事件中，获取当前省 下拉框的value值

//3、以value值作为索引，获取城市列表

//4、获取市 下拉框对象 city

//5、对city数据进行初始化，回归初始状态

//6、遍历城市列表，每遍历一个城市，拼接一个option，追加到city标签内容体末尾

1. 代码实现：

2. <script>    // 定义二维数组,存储城市信息    var cities = new Array();    cities[0] = new Array("海淀区","房山区","朝阳区");    cities[1] = new Array("长春市","吉林市","松原市","延边市");    cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");    cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");    cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");    //1、页面加载完成时，为省 下拉框绑定 onchange事件    window.onload = function (ev) {       //2、onchange事件中，获取当前省 下拉框的value值       var province = document.getElementById("province");       province.onchange = function (ev1) {          //3、以value值作为索引，获取城市列表          var arr = cities[this.value];          //4、获取市 下拉框对象 city          var city = document.getElementById("city");          //5、对city数据进行初始化，回归初始状态          city.innerHTML = "\"\">----请-选-择-市----";          //6、遍历城市列表，每遍历一个城市，拼接一个option，追加到city标签内容体末尾          for (var i = 0; i <arr.length ; i++) {             var option = ""+arr[i]+"";             city.innerHTML+=option;          }       };    }; script>

 1，域的值被改变时：onchange

2，数据源是二位数组。（取值方式等同于java）

3，下拉框内容体改变。innerHTML=“”。