JS制作简单的三级联动
更新时间：2015年03月18日 15:03:45 投稿：hebedich
本文给大家分享的是使用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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
JavaScript中的高阶函数是指可以接受其他函数作为参数或者返回一个函数作为结果的函数，本文介绍了JS中一些高阶函数的妙用，希望对大家有所帮助2023-05-05
下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
下面小编就为大家带来一篇js实现页面跳转的几种方法小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
获取select标签选中的值有很多方法，下面通过两种方式使用js来进行获取，喜欢的朋友可以参考下2014-01-01
本篇文章主要介绍了JavaScript中的五种事件处理程序方式，具有一定的参考价值，有需要的可以了解一下。2016-12-12
今天做项目遇到这样的问题，要将获取到的时间转换为时间戳，通过查阅相关资料，问题顺利解决，下面小编把具体实现代码分享到脚本之家平台，需要的朋友参考下2017-12-12
这篇文章主要介绍了详解ES6 CLASS在微信小程序中的应用实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了javascript省市级联功能实现方法,以不同实例形式分析了JavaScript实现省市级联菜单的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了JS onkeypress兼容性的写法，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论