JS制作简单的三级联动
用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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍js编写三级联动简单案例，包括了js编写三级联动简单案例的使用技巧和注意事项，需要的朋友参考一下 刚给学妹写了个简单的地区的三级联动简单案例，分享给正在学习的朋友参考下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍javascript实现二级级联菜单的简单制作，包括了javascript实现二级级联菜单的简单制作的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现二级级联菜单的简单制作方法。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 希望本文所述对大家学习javascript程序设计有所帮助。
-
本文向大家介绍js+html制作简单验证码，包括了js+html制作简单验证码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript制作验证码的具体代码，供大家参考，具体内容如下 另一个js验证码的部分代码： 附效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS简单实现多级Select联动菜单效果代码，包括了JS简单实现多级Select联动菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下： JS联动菜单，简单代码实现JS多级Select联动菜单，也就是大家常用的一款菜单，Select联动状态的菜单，网页上经常见到的效果，希望大家能用得上。 运
-
本文向大家介绍jQuery制作简洁的多级联动Select下拉框，包括了jQuery制作简洁的多级联动Select下拉框的使用技巧和注意事项，需要的朋友参考一下 今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，
-
本文向大家介绍javascript实现简单的二级联动，包括了javascript实现简单的二级联动的使用技巧和注意事项，需要的朋友参考一下 二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。 要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。 首先，onchange 事件