您的位置:首页 > Web前端 > JavaScript

web前端教程:使用javascript实现多级联动效果

2016-05-12 23:38 841 查看
本人是个初学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>

谢谢大家看到这里,此篇文章为抛砖引玉,如果有更好的方法欢迎指出。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: