您的位置：首页 > Web前端 > JQuery

用jquery实现三级联动

2017-08-25 22:43 483 查看

效果

1、页面加载是需要有选择省份

2、编写省份下拉框change事件

3、编写城市区域下拉框change事件

4、省市的下拉框更改时要将后面的下拉框清空

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//创建三维数组
var lists = new Array(2);

lists["湖北省"] = ["武汉市","天门市"];
lists["湖北省"]["武汉市"] =["江夏区","洪山区","青山区","黄陂区"];
lists["湖北省"]["天门市"] = ["竟陵街道","九真镇","渔薪镇","皂市镇"];
lists["湖南省"] =["长沙市","韶山市"];
lists["湖南省"]["长沙市"] = ["芙蓉区","天心区","岳麓区","开福区"];
lists["湖南省"]["韶山市"] =["清溪镇","银田镇","如意镇"];
//创建$工厂函数用来制作省份的下拉框
$(function(){
//创建一个节点用pp接收
var pp='<option value="请选择省份">请选择省份</option>';
//将节点加到id为province的下拉框里
$("#province").append(pp);
//遍历省份并将省份放到下拉框里
for (var provinceMe in lists){
//将省份放到下拉框里
$("#province").append('<option value='+provinceMe+'>'+provinceMe+'</option>');
}
})
//制作城市的下拉列表框
function provinceSelect(cc){
//当选择省份的时候清空城市和区域
$("#city").empty();
$("#region").empty();
//创建节点用cityMe接受
var cityMe = '<option value="请选择城市">请选择城市</option>';
// 将节点放到城市下拉框里
$("#city").append(cityMe);
//获取省份名称
var provinceMe = $(cc).val();
//遍历省份将城市放进去
for (var i=0;i<lists[provinceMe].length;i++){
//将城市放到下拉框里
$("#city").append('<option value='+lists[provinceMe][i]+'>'+lists[provinceMe][i]+'</option>');
}
}
//制作区域的下拉框
function citySelect(region){
//选择城市时清空区域的节点
$("#region").empty();
//创建节点用regionMe接收
var regionMe = '<option value="请选择区域">请选择区域</option>';
//将节点放到区域下拉框里
$("#region").append(regionMe);
//获取省份名称
var provinceHe =$("#province").val();
//获取城市名称
var cityHe =$(region).val();
//遍历循环
for (var i =0;i<lists[provinceHe][cityHe].length;i++){
$("#region").append('<option value='+lists[provinceHe][cityHe][i]+'>'+lists[provinceHe][cityHe][i]+'</option>');

}
}
</script>
</head>
<body>
<select id="province" onchange="provinceSelect(this);"></select>
<select id="city" onchange="citySelect(this);"></select>
<select id="region"></select>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航