JavaScript实现省份城市的三级联动
更新时间：2020年02月11日 10:06:09 作者：da_yu_hai_tang
这篇文章主要为大家详细介绍了JavaScript实现省份城市的三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现省份城市的三级联动的具体代码，供大家参考，具体内容如下
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select{
width: 80px;
margin: 5px;
}
</style>
<script>
// 省份数组
var provinceArr = ['上海', '江苏', '河北'];
// 城市数组
var cityArr = [
['上海市'],
['苏州市', '南京市', '扬州市'],
['石家庄', '秦皇岛', '张家口']
];
// 区域数组
var countryArr = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
],
[
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区']
],
[
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宣化区', '下花园区']
]
];
window.onload = function(){
var province = document.getElementById('province');
var city = document.getElementById('city');
var country = document.getElementById('country');
createOption(province, provinceArr);
province.onchange = function(){
city.length = 0;
createOption(city, cityArr[this.selectedIndex]);
city.onchange();
}
city.onchange = function(){
country.length = 0;
createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
}
province.onchange();
}
function createOption(obj, data){
for (var i = 0; i < data.length; i++) {
var newOption = new Option(data[i], data[i]);
obj.add(newOption, null);
}
}
</script>
</head>
<body>
省份<select name="" id="province"></select>
城市<select name="" id="city"></select>
区域<select name="" id="country"></select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序开发实现消息推送，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了JavaScript断言与类型守卫及联合声明，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下2015-04-04
这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。2020-09-09
网站加入flash广告代码，利用DIV层来控制进度的状态，如果加载swf文件到100%的时候就显示出flash，把AD层隐藏掉，请看下面实现方法。2010-04-04
这篇文章主要介绍了js实现带按钮的上下滚动效果,设计javascript鼠标事件及页面元素样式的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript中关于数组的调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了JavaScript与jQuery中文档就绪函数的区别，文章内容介绍详细，具有一的的参考价值，需要的小伙伴可以参考一下2022-03-03
这篇文章主要为大家详细介绍了js实现复选框全选与反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这个例子来自于《Maximizing ASP.NET Real World, Object-Oriented Development》一书, 需要的朋友可以参考下。2009-11-11
最新评论