实现省市区三级联动的前端代码示例-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128722635

省市区三级联动

一、Demo
- <1>.要求
- <2>.功能
二、实现原理
三、代码
四、效果展示

一、Demo

<1>.要求

通过三个下拉菜单的联动来实现，
第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。
当点击第一级下拉菜单，第二级菜单的内容会自动匹配；
选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。

<2>.功能

可条理清晰的寻找到想要的省市区

二、实现原理

JS部分，先为省市区添加数组，然后获取对应的省市区数据，并为各自创建新选项，
最后，对数据进行遍历即可

三、代码

<1>.Html部分

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>省市区三级联动</title>
 <link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
     省份<select name="" id="province"></select>
     城市<select name="" id="city"></select>
     区域<select name="" id="country"></select>
</div>

 <script src="./index.js"></script>
</body>
</html>

<2>.Css部分


*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    margin: 100px auto;
}
select{
    width: 80px;
    margin: 5px;
}

<3>.Js部分

// 省份数组
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);      
}
}