Javascript知识【省市二级联动】重点-CFANZ编程社区

💂 个人主页:爱吃豆的土豆
💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
🏆人必有所执，方能有所成！
🐋希望大家多多支持😘一起进步呀！

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

分析：

关键点：

域的值被改变时： onchange

<!-- select框的value 取决于：选中了哪个option，取的是该option的value值只有值的内容发生改变时，才能触发该事件 --> <select id="province" style="width:150px" onchange="alert(this.value)"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">吉林省</option> <option value="2">山东省</option> <option value="3">河北省</option> <option value="4">江苏省</option> </select>

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

<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("南京市","苏州市","扬州市","宿迁市"); //取值：二维数组[大数组索引][小数组索引];* alert(*cities[4][3]); </script*>

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

步骤：

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

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

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

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

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

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

代码实现：

<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 = "<option value=\"\">----请-选-择-市----</option>"; //6、遍历城市列表，每遍历一个城市，拼接一个option，追加到city标签内容体末尾 for (var i = 0; i <arr.length ; i++) { var option = "<option>"+arr[i]+"</option>"; city.innerHTML+=option; } }; }; </script>

1，域的值被改变时：onchange

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

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