jQuery解析json格式数据生成级联菜单

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了从json格式数据中读取相关省市县数据,生成级联菜单。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
select{
border:1px solid #c9c9c9;
background-color:#fff;
color:#666;
height:28px;
line-height:28px;
padding:4px 6px;
font-size:14px;
border-radius:4px;
cursor:pointer;
outline:none;
}
</style>
</head>
<body>
<select id="one">
<option value="">请选择省份</option>                
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>        
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var province = [
{
"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{
"name" : "河南省" ,
"city" : [
{
"name" : "郑州市" ,
"area" : ["中原区","二七区","管城回族区","金水区"]
},
{
"name" : "洛阳市" ,
"area" : ["西工区","老城区","瀍河回族区","涧西区"]
}
]
},
{
"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
}
]
},
];
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index();
var two_index = $("#two option:selected").index();
var three = $("#three");
three.empty().append("<option>请选择区域</option>");
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area;
for(var index = 0; index < area.length; index++){
three.append("<option>"+area[index]+"</option>");
}
}
});
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index();
var two = $("#two");
two.empty().append("<option>请选择城市</option>");
$("#three").empty().append("<option>请选择区域</option>");//清除
if(one_index > 0){
var city = province[one_index-1].city;
for(var index = 0 ; index < city.length ; index++){
two.append("<option>"+city[index].name+"</option>");
}
}
});
init();
function init(){
for(var index = 0 ; index < province.length ; index++){
$("#one").append("<option>"+province[index].name+"</option>");
}
}
});
</script>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function(){}),文档结构完全加载完毕再去执行函数中的代码,在这里其实没有必要,因为代码放在的页面的底部。

(2).

var province = [
{
"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
}
]

存储数据的json格式对象,仅以广东省为例子。

数组的元素是对象,对象的name属性标识省份,city标识省份下的城市。

city又指向一个数组,这个数组元素也是对象,name属性标识城市,area属性是存储地区的数组。

(3).$("#two").change(function(){}),为城市下拉菜单注册change事件处理函数。

(4).var one_index = $("#one option:selected").index(),获取省份下拉菜单选中option项的索引。

(5).var two_index = $("#two option:selected").index(),获取城市下拉菜单选中option项的索引。

(6).var three = $("#three"),获取地区select下拉菜单。

(7).three.empty().append("<option>请选择区域</option>"),首先清空原来下拉菜单的项,防止以前的暴力,然后添加默认项。

(8).if(two_index > 0){},如果所以只不是0,那么就指向相应的动作,因为等于0的话,相当于没有选中任何城市。

(9). province[one_index-1].city[two_index-1].area,从json数据结构中取出对应的地区数组。

(10).for(var index = 0; index < area.length; index++){

  three.append("<option>"+area[index]+"</option>");

},通过循环方式,将地区添加到select下拉菜单。

二.相关阅读:

(1).json更多内容可以参阅json教程板块。

(2).index()可以参阅jQuery index()方法一章节。

(3).empty()可以参阅jQuery empty() 方法一章节。

(4).change事件可以参阅jQuery change事件一章节。

jQuery解析json格式数据生成级联菜单,这样的场景在实际项目中还是用的比较多的,关于jQuery解析json格式数据生成级联菜单就介绍到这了。

jQuery解析json格式数据生成级联菜单属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容