javaScript案例——二级联动、三级联动、省市区三级联动

60 阅读 0 评论 40 点赞

我是靠谱客的博主火星上冷风，最近开发中收集的这篇文章主要介绍javaScript案例——二级联动、三级联动、省市区三级联动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

二级联动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/联动.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select name="" id="pros">
</select>
<select name="" id="citys">
</select>
</body>
</html>

var pros = ['广西', '广东', '湖北'];
var citys = [
['南宁', '柳州', '桂林', '河池'],
['广州', '珠海', '佛山', '中山'],
['武汉', '宜昌']
];
window.onload = function() {
var pro = document.getElementById('pros');
var city = document.getElementById('citys');
for (var i = 0; i < pros.length; i++) {
var option = document.createElement('option');
option.innerHTML = pros[i];
pro.appendChild(option);
}
for (var i = 0; i < citys[0].length; i++) {
var option = document.createElement('option');
option.innerHTML = citys[0][i];
city.appendChild(option);
}
pro.onchange = function() {
// 判断select中选中的下标
var index = pro.selectedIndex;
var child = city.childNodes;
var lenght = child.length;
// 清空城市下拉框的内容
console.log(child);
for (var i = 0; i < lenght; i++) {
city.removeChild(child[0]);
};
// 添加
for (var i = 0; i < citys[index].length; i++) {
var option = document.createElement('option');
option.innerHTML = citys[index][i];
city.appendChild(option);
};
}
}

三级联动：

案例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/三级联动.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select id="province" onclick="changeProvince()">
</select>
<select id="city" onclick="changeCity()">
</select>
<select id="area">
</select>
</body>
</html>

var data = {
"province": [{
"name": "广东省",
"citylist": [{
"name": "天河区",
"arealist": [{
"name": "岗顶"
},
{
"name": "体育西路"
},
{
"name": "东圃"
}
]
},
{
"name": "白云区",
"arealist": [{
"name": "人和"
},
{
"name": "嘉禾望岗"
},
{
"name": "三元里"
}
]
},
{
"name": "海珠区",
"arealist": [{
"name": "中大"
},
{
"name": "广州塔"
},
{
"name": "大塘"
}
]
}
]
},
{
"name": "广西省",
"citylist": [{
"name": "桂林市",
"arealist": [{
"name": "七星"
},
{
"name": "崖山"
},
{
"name": "燕山"
}
]
},
{
"name": "南宁市",
"arealist": [{
"name": "兴宁区"
},
{
"name": "青秀区",
},
{
"name": "西乡塘区",
}
]
},
{
"name":"河池市",
"arealist":[{
"name":"大化县瑶族自治县"
},
{
"name":"都安瑶族自治县"
}]
}
]
}
]
}
window.onload = function() {
// 填充初始数据
// 获取json对象的province属性：返回的是一个数组对象
// 获取页面加载时的初始省份信息
pros={'广东省','广西省'}
var pros = data.province;
// 获取页面加载时的初始城市信息	pros[0].citylist：{'天河区','白云区','海珠区'}
var cities = pros[0].citylist;
// 获取页面加载时的初始地区信息	pros[0].citylist[0].arealist：{'岗顶','体育西路','东圃'}
var areas = cities[0].arealist;
// 填充省份
// 获取省份下拉框
var province = document.getElementById('province');
// 遍历省份数组，添加初始数据
for (var i = 0; i < pros.length; i++) {
// 创建option标签
var option = document.createElement('option');
// 设置option标签的文本内容
option.innerText = pros[i].name;
// 将option追加到select中
province.appendChild(option);
}
// 填充城市
// 获取城市下拉框
var city = document.getElementById('city');
// 遍历城市数组，添加数据
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.innerText = cities[i].name;
city.appendChild(option);
}
// 填充地区
// 获取地区下拉框
var area = document.getElementById('area');
// 遍历地区数组，添加数据
for (var i = 0; i < areas.length; i++) {
var option = document.createElement('option');
option.innerText = areas[i].name;
area.appendChild(option);
}
}
// 省份下拉框发生改变时的操作
function changeProvince() {
// 获取省份下拉框
var province = document.getElementById('province');
// 获取选中省份的下标
var index = province.selectedIndex;
// 获取省份
var pros = data.province[index];
// 所选省份对应的城市
var cities = pros.citylist;
// 对应城市的地区
var areas = cities[0].arealist;
// 获取城市下拉框
var city = document.getElementById('city');
// 清除生词下拉框原先的数据
// 获取原先的option数组
var childs = city.childNodes;
var length = childs.length;
// 每次删除，数组的长度都是动态变化减少，所以需要定义一个变量用于接受数组原始长度，
// 按照原始的长度来确定循环次数，因为循环删除，元素逐渐减少，所以每次删除的都是下标为0的元素
for (var i = 0; i < length; i++) {
// 删除的都是第一个元素，直至没有
city.removeChild(childs[0]);
}
// 填充对应的城市
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.innerText = cities[i].name;
city.appendChild(option);
}
// 与城市的操作一样
var area = document.getElementById('area');
// 获取地区的子节点数组（option）
var childNodes = area.childNodes;
// 子节点数组的长度
var cength = childNodes.length;
// 遍历childNodes，循环删除
for (var i = 0; i < cength; i++) {
area.removeChild(childNodes[0]);
}
for (var i = 0; i < areas.length; i++) {
var option = document.createElement('option');
option.innerText = areas[i].name;
area.appendChild(option);
}
}
// 城市下拉框发生改变时的操作
function changeCity() {
// 获取选中省份的下标
var pindex = document.getElementById('province').selectedIndex;
// 获取选中城市的下标
var cindex = document.getElementById('city').selectedIndex;
// 获取地区数组
var areas = data.province[pindex].citylist[cindex].arealist;
// 获取地区下拉框
var area = document.getElementById('area');
// 获取原先的option数组
var childs = area.childNodes;
var length = childs.length;
// 删除原先的option元素
for (var i = 0; i < length; i++) {
area.removeChild(childs[0]);
}
// 向area填充新的内容
for (var i = 0; i < areas.length; i++) {
var option = document.createElement('option');
option.innerText = areas[i].name;
area.appendChild(option);
}
}

案例二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/国家级联动.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select id="country" onclick="changeCountry()">
</select>
<select id="province" onclick="changeProvince()">
</select>
<select id="city">
</select>
</body>
</html>

var data = {
"country":[{
"name":"China",
"provincelist":[{
"name":"北京市",
"citylist":[{
"name":"朝阳区"
},
{
"name":"东城区"
},
{
"name":"西城区"
}]
},{
"name":"广东省",
"citylist":[{
"name":"广州市"
},{
"name":"珠海市"
},{
"name":"深圳市"
},{
"name":"江门市"
}]
},{
"name":"广西省",
"citylist":[{
"name":"南宁市"
},{
"name":"河池市"
},{
"name":"玉林市"
},{
"name":"桂林市"
}]
}
]
},{
"name":"U.S.A",
"provincelist":[{
"name":"加利福尼亚州",
"citylist":[{
"name":"洛杉矶"
},{
"name":"好莱坞"
},{
"name":"阿凯迪亚"
},{
"name":"蒙特利公园"
}]
},{
"name":"佛罗里达州",
"citylist":[{
"name":"杰克逊维尔"
},{
"name":"迈阿密"
},{
"name":"坦帕市"
}]
},{
"name":"夏威夷州",
"citylist":[{
"name":"夏威夷县"
},{
"name":"檀香山县"
},{
"name":"卡拉沃县"
}]
}]
}]
}
window.onload = function() {
var countries = data.country;
var country = document.getElementById('country');
for(var i = 0;i<countries.length;i++) {
// 创建option标签
var option = document.createElement('option');
option.innerText = countries[i].name;
country.appendChild(option);
}
var pros = countries[0].provincelist;
var province = document.getElementById('province');
for(var i = 0;i<pros.length;i++) {
// 创建option标签
var option = document.createElement('option');
option.innerText = pros[i].name;
province.appendChild(option);
}
var cities = countries[0].provincelist[0].citylist;
var city = document.getElementById('city');
for(var i = 0;i<cities.length;i++) {
// 创建option标签
var option = document.createElement('option');
option.innerText = cities[i].name;
city.appendChild(option);
}
}
function changeCountry() {
var country = document.getElementById('country');
var index = country.selectedIndex;
var countries = data.country[index];
var provinces =countries.provincelist;
var cities = provinces[0].citylist;
var province = document.getElementById('province');
var childs =province.childNodes;
var length = childs.length;
for(var i =0;i<length;i++) {
province.removeChild(childs[0]);
}
for(var i = 0;i<provinces.length;i++) {
var option = document.createElement('option');
option.innerText = provinces[i].name;
province.appendChild(option);
}
var city = document.getElementById('city');
var childNodes = city.childNodes;
var clength = childNodes.length;
for(var i =0;i<clength;i++) {
city.removeChild(childNodes[0]);
}
for(var i = 0;i<cities.length;i++) {
var option = document.createElement('option');
option.innerText = cities[i].name;
city.appendChild(option);
}
}
function changeProvince() {
var cindex = document.getElementById('country').selectedIndex;
var pindex = document.getElementById('province').selectedIndex;
var cities = data.country[cindex].provincelist[pindex].citylist;
var city = document.getElementById('city');
var childs = city.childNodes;
var length = childs.length;
for(var i =0;i<length;i++) {
city.removeChild(childs[0]);
}
for(var i=0;i<cities.length;i++) {
var option = document.createElement('option');
option.innerText = cities[i].name;
city.appendChild(option);
}
}