您的位置：首页 > Web前端 > JavaScript

js 三级联动

2019-03-21 20:53 267 查看

一个非常low的一个三级联动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" name="theform">
<select name="province" onchange="getCity()">
<option value = "0">请选择所在的省份</option>
<option value="1">浙江省</option>
<option value="2">山东省</option>
<option value="3">广东省</option>
<option value="4">甘肃省</option>
</select>

<select id="city" onchange="getQu()">
<option value = "0">请选择所在的城市</option>
</select>

<select name = "qu">
<option value = "0">请选择所在的县区</option>
</select>

</form>

<script>

//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[
["杭州市","温州市","宁波市","绍兴市"],//浙江省
["济南市","青岛市","济宁市","潍坊市"],//山东省
["广州市","潮阳","澄海","潮州"],//广东省
["兰州市","白银","敦煌","定西"]//甘肃省
];

//县区数组
var qu=[
[
["杭州一区","杭州二区"],
["温州一区","温州二区"],
["宁波一区","宁波二区"],
["绍兴一区","绍兴二区"]
],

[
["济南一区","济南二区"],
["青岛一区","青岛二区"],
["济宁一区","济宁二区"],
["潍坊一区","潍坊二区"],
],

[
["广州一区","广州二区"],
["潮阳一区","潮阳二区"],
["澄海一区","澄海二区"],
["潮州一区","潮州二区"],
],

[
["兰州一区","兰州二区"],
["白银一区","白银二区"],
["敦煌一区","敦煌二区"],
["定西一区","定西二区"],
]

];
var getProvince = document.forms['theform'].province;
var City = document.forms[0].city;
var Qu = document.forms[0].qu;
function getCity(){
// 初始化
Qu.length = 1;
City.length = 1;
// 获得 省份选择的项（索引值，0开始）
var getSelectIndex = getProvince.selectedIndex;
// 匹配选择省下面的 市区
var proCity = city[getSelectIndex-1]; //
console.log( proCity)
for( var i=0; i<proCity.length; i++){
City[i+1] = new Option(proCity[i],getSelectIndex)
}
}

function getQu(){
var getSelectIndex = getProvince.selectedIndex;  // 省
var getCitySelectedIndex = City.selectedIndex; // 市
console.log( getCitySelectedIndex )
var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];
console.log( cityQu )

for( var i=0; i<cityQu.length; i++){
Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航