web前端教程：使用javascript实现多级联动效果
本人是个初学web前端（http://www.maiziedu.com/course/web/）的菜鸟，平时学习前端就在网上找些视频资料，或者看看大神的博客，问问身边的大牛，之前在学习html中学到了select，想做一个多级联动的效果，本篇算是一个简单的多级联动效果的教程，效果简单，实现的是点击前面的国家出现对应城市，代码也简单。如果有错误请尽管喷我不要客气，但是务必帮楼主指出来错误之处，谢谢^ ^。
js部分用到了Jquery。
首先把html部分写下来，我分为两个部分，国家与城市
<body>
<select class="country"></select>
<select class="city"></select>
</body>
稍微添加一个css样式，变成浮动效果，添加外边距，加个宽度
.country,.city {
float: left;
margin:20px 10px;
width：150px
}
</style>
然后用js制作国家与城市的数组，实现代码如下：
<script src="./jquery.js"></script><script type="text/javascript">
$(document).ready(function(e) {
var cou = [{
couname: "中国"
}, {
couname: "美国"
}, {
couname: "澳大利亚"
}];var citi = [{
name: "北京"
}, {
name: "上海"
}, {
name: "深圳"
}, {
name: "纽约"
}, {
name: "旧金山"
}, {
name: "华盛顿"
}, {
name: "悉尼"
}, {
name: "墨尔本"
}, {
name: "堪培拉"
}];</script>
接下来的问题就是怎么把联动效果添加上去了，换言之就是怎么为country与city建立联系。
一个很简单的方法就是让country成为对应的city的父元素，将city与country中的内容重写合并为一个完整的数组，如下：
var cou = [{
couname: "中国",
citi: ['北京', '上海', '深圳']
}, {
couname: "美国",
citi: ['纽约', '旧金山', '华盛顿']
}, {
couname: "澳大利亚",
citi: ['悉尼', '墨尔本', '堪培拉']
}];
如大家所见，name一栏是country的部分，而citi一栏是city的部分，每个citi都与对应的国家名字（couname）成为一个完整的对象。
关联已经建立起来了，接下来的问题就是怎么把内容添加进去。
首先要确定我们要实现的效果，效果是点击国家出现对应的城市，也就是说，国家的选项是预先存在的，这与我们之前写的代码并无不同，我直接复制粘贴过来，也就是下面这段。
var cous = [];
cous.push("<select><option>请选择国家</option>");
for (var i = 0; i < cou.length; i++) {
cous.push("<option>" + cou[i].couname + "</option>");
}
cous.push("</select>");
$(".country").html(cous.join(''));
那城市的效果是什么呢？我们细化来说，刚开始的时候，城市是并不存在了，只有在选择了国家之后，城市才会添加到选项之中。大家注意，选择了国家，这是一个事件。这个事件是什么呢？是change。
当country发生change事件时，对应的城市添加到选项之中。
那怎么确定对应的城市呢？看country部分选择的是哪个国家。
所以这部分也明确了，为country部分添加一个change事件，当change事件发生时再调用一个函数来添加城市，这个函数利用选择器确定国家，然后与城市进行匹配，一个萝卜一个坑，大家挨个往里跳。
虽然我们一个坑里有三个萝卜...
不扯淡，这是技术帖...认真脸= =
大家先看代码：
$(".country").on('change',function(e) {
var cities = [];
cities.push("<option>请选择城市</option>");
var selcountry = $(".country").val(); //选择的国家名字
for (var i = 0; i < cou.length; i++) {
if (cou[i].couname == selcountry) {
for (var m = 0; m < cou[i].citi.length; m++) {
cities.push("<option>" + cou[i].citi[m] + "</option>");
}
}
}
$(".city").html(cities.join(''));
})
到这里，我们要的效果就基本实现了。全篇代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title></head><script src="./jquery.js"></script><script type="text/javascript">
$(document).ready(function(e) {
var cou = [{
couname: "中国",
citi: ['北京', '上海', '深圳']
}, {
couname: "美国",
citi: ['纽约', '旧金山', '华盛顿']
}, {
couname: "澳大利亚",
citi: ['悉尼', '墨尔本', '堪培拉']
}];
var cous = [];
cous.push('<option>请选择国家</option>');
for (var i = 0; i < cou.length; i++) {
cous.push('<option>' + cou[i].couname + "</option>");
}
$(".country").html(cous.join(''));
$(".country").on('change',function(e) {
var cities = [];
cities.push("<option>请选择城市</option>");
var selcountry = $(".country").val(); //选择的国家名字
for (var i = 0; i < cou.length; i++) {
if (cou[i].couname == selcountry) {
for (var m = 0; m < cou[i].citi.length; m++) {
cities.push("<option>" + cou[i].citi[m] + "</option>");
}
}
}
$(".city").html(cities.join(''));
})
});</script><style type="text/css">.country,.city {
float: left;
margin: 20px 10px;
width: 150px;
}</style><body>
<select class="country"></select>
<select class="city"></select></body>
</html>
谢谢大家看到这里，此篇文章为抛砖引玉，如果有更好的方法欢迎指出。