js 实现简单的三级联动
来源:互联网 发布:java qq还可以用吗 编辑:程序博客网 时间:2024/06/16 21:10
声明:只为学习交流使用,记得当时是从开源中国上看的,如有侵犯权利可联系我删除,并再次感谢原作者
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>js 简单实现三级联动</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>
阅读全文
0 0
- js 实现简单的三级联动
- 简单的实现三级联动
- JS简单实现三级联动效果
- JS制作简单的三级联动
- js实现三级联动
- JS实现三级联动
- js实现三级联动
- JQuery/JS实现的三级联动选择
- 原生JS实现的城市三级联动
- 三级联动js,jQuery的实现方法
- js中三级联动的实现
- js实现城市列表的三级联动
- 简单的三级联动
- 简单的三级联动
- js实现省市区三级联动
- js实现省市区三级联动
- js实现三级联动-年月日
- JS实现三级联动功能
- UVALive 7267Mysterious Antiques in Sackler Museum (判断长方形)
- matlab2014a安装密钥
- Android Studio JNI关联C头文件源码
- FileItem类
- offer收割编程赛34(股票价格3)
- js 实现简单的三级联动
- node.js 批量下载css文件里的图片
- 11.5dairy
- RxAndroid 防止按钮短时间内被重复点击多次,进行限制
- Java多线程基础:进程和线程之由来
- 63. Unique Paths II
- CSS_界面
- 软件工程(C编码实践篇)学习总结
- 计蒜客 noip 模拟#4Day1T1 小X的素数 【线性筛】