JavaScript实现三级联动菜单实例代码
程序员文章站
2022-05-26 11:11:20
本文给大家分享的是使用javascript实现的一个简单的三级联动菜单，非常简单实用，有需要的小伙伴过来参考下吧。
用javascript制作的一个简单三级联动，非常简单...
本文给大家分享的是使用javascript实现的一个简单的三级联动菜单，非常简单实用，有需要的小伙伴过来参考下吧。
用javascript制作的一个简单三级联动，非常简单实用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
省：
<select style="width: 100px;" id="pre" onchange="chg(this);">
<option value="-1">请选择</option>
</select>
市：
<select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
区：
<select style="width: 100px;" id="area"></select>
</body>
<script>
//声明省
var pres = ["北京", "上海", "山东"]; //直接声明array
//声明市
var cities = [
["东城", "昌平", "海淀"],
["浦东", "高区"],
["济南", "青岛"]
];
var areas = [
[
["东城1", "东城2", "东城3"],
["昌平1", "昌平2", "昌平3"],
["海淀1", "海淀2", "海淀3"]
],
[
["浦东1", "浦东2", "浦东3"],
["高区1", "高区2", "高区3"]
],
[
["济南1", "济南2"],
["青岛1", "青岛2"]
]
]
//设置一个省的公共下标
var pindex = -1;
var preele = document.getelementbyid("pre");
var cityele = document.getelementbyid("city");
var areaele = document.getelementbyid("area");
//先设置省的值
for (var i = 0; i < pres.length; i++) {
//声明option.<option value="pres[i]">pres[i]</option>
var op = new option(pres[i], i);
//添加
preele.options.add(op);
}
function chg(obj) {
if (obj.value == -1) {
cityele.options.length = 0;
areaele.options.length = 0;
}
//获取值
var val = obj.value;
pindex = obj.value;
//获取ctiry
var cs = cities[val];
//获取默认区
var as = areas[val][0];
//先清空市
cityele.options.length = 0;
areaele.options.length = 0;
for (var i = 0; i < cs.length; i++) {
var op = new option(cs[i], i);
cityele.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new option(as[i], i);
areaele.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedindex;
var as = areas[pindex][val];
areaele.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new option(as[i], i);
areaele.options.add(op);
}
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。