Javascript知识【省市二级联动】重点
目录
- 💂 个人主页: 爱吃豆的土豆
- 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
- 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
🏆人必有所执,方能有所成!
🐋希望大家多多支持😘一起进步呀!
省市二级联动(后续三级联动)
分析:
关键点:
- 域的值被改变时: onchange
<!-- |
- 数据源是二维数组。(取值方式等同于java)
<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=“”。
文章来源: qianxu.blog.csdn.net,作者:爱吃豆的土豆,版权归原作者所有,如需转载,请联系作者。
原文链接:qianxu.blog.csdn.net/article/details/126214380
- 点赞
- 收藏
- 关注作者
评论(0)