您的位置:首页> 实例代码> JSON实例

javascript读取以json形式存储的省市级联效果

2017-2-2 16:21| 作者: admin| 查看: 1201| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了从json数据格式中读取数据,然后显示出来。

这里是具有级联效果的省市功能,代码实例如下:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
a{ 
  color:#000; 
  text-decoration:none; 
}
a:hover{ 
  color:#F00; 
}
#menu{ 
  width:100px; 
  border:1px solid #CCC; 
  border-bottom:none;
}
#menu ul{ 
  list-style:none; 
  margin:0px; 
  padding:0px; 
}
#menu ul li{ 
  background:#eee; 
  padding:0px 8px; 
  height:26px; 
  line-height:26px; 
  border-bottom:1px solid #CCC; 
  position:relative; 
}
#menu ul li ul{ 
  display:none; 
  position:absolute; 
  left:100px; 
  top:0px; 
  width:100px;
  border:1px solid #ccc; 
  border-bottom:none; 
}
#menu ul li.current ul{ 
  display:block;
} 
#menu ul li ul li{
  text-align:center;
}
</style>
<script type="text/javascript">
var provs = { 
  "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"],
  "福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
  "河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"],
  "四川省": ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市"],
  "山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市"],
  "内蒙古": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市"],
  "海南省": ["海口市", "三亚市"], "重庆市": ["重庆"], 
  "贵州省": ["贵阳市", "六盘水市", "遵义市", "安顺市", "铜仁地区", "黔西南布依族苗族自治州"],
  "甘肃省": ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市"],
  "青海省": ["西宁市", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州"],
  "宁夏自治区": ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"]
};
function iniEvent(){
  var provUL=document.getElementById("prov");
  if(provUL){
    var allli=provUL.getElementsByTagName("li");
    for(index=0;index<allli.length;index++) {
      node=allli[index];
      node.onmouseover=function(){
        this.className="current";
      }
      node.onmouseout=function(){
        this.className=this.className.replace("current","");
      }
    }
  }
}
function loadData(){      
  var provUL=document.getElementById("prov");
  var nIndex=0;
  for (var key in provs){
    var provLi = document.createElement("li");
    provLi.id = "provLI" + nIndex;
    provLi.innerHTML = "<a href='#'>" + key + "</a>";
    provUL.appendChild(provLi);
 
    var citys = provs[key];
    if (citys.length > 0) {
      var cityUL = document.createElement("ul");
      var maxLength = 0;
      for (var index = 0; index < citys.length; index++) {
        var cityName = citys[index];
        if (cityName.length > maxLength) {
          maxLength = cityName.length;
        }
        var cityLI = document.createElement("li");
        cityLI.id = "cityLI" + index;
        cityLI.innerHTML = "<a href='#'>" + cityName + "</a>";
        cityUL.appendChild(cityLI);
      }
      if (maxLength <= 6) {
        maxLength = 100;
      }
      else {
        maxLength = maxLength * 20;
      }
      maxLength = maxLength + "px"; 
      cityUL.style.width= maxLength; 
      provLi.appendChild(cityUL);
    }
    nIndex++;
  }
  iniEvent();
}
window.onload=function(){
  loadData();
}
</script>
</head>
<body>
<div id="menu">
  <ul id="prov"></ul>
</div>  
</body>
</html>

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

一.代码注释:

(1).var provs = { },存有省市的json结构数据(一个对象直接量)。

(2).function iniEvent(){},此方法实现了事件处理函数的注册功能。

(3).var provUL=document.getElementById("prov"),获取id属性值为prov的ul元素的对象。

(4).if(provUL),判断元素是否存在。

(5).var allli=provUL.getElementsByTagName("li"),获取下面的li元素对象集合。

(6).for(index=0;index<allli.length;index++) {},遍历每一个li元素对象。

(7).node=allli[index],获取指定索引的li元素对象。

(8).node.onmouseover=function(){

  this.className="current";

},为li元素注册onmouseover事件处理函数。

也就是鼠标悬浮的时候为当前元素添加class样式值current。由于css代码如下:

#menu ul li.current ul{ 

  display:block;

} ,所以是给第一级的li元素添加样式类,使下面的ul元素显示,也就是让城市显示。

(9).node.onmouseout=function(){

  this.className=this.className.replace("current","");

},删除添加的样式类值。

(10).function loadData(){ },此函数实现了读取省市并且放置于ul li中。

(11).var provUL=document.getElementById("prov"),获取id属性值为prov的元素,也就是这里的ul元素。

(12).var nIndex=0,声明一个变量并赋值为0,用来作为id的一部分,它是变化的。

(13).for (var key in provs){},遍历json格式对象。

(14).var provLi = document.createElement("li"),创建一个li元素对象,用来防止省份。

(15).provLi.id = "provLI" + nIndex,为当前li元素添加id属性并赋值。

(16).provLi.innerHTML = "<a href='#'>" + key + "</a>",设置li元素的内容,其实就是省份。

(17).provUL.appendChild(provLi),将li元素添加到ul中。

(18).var citys = provs[key],获取城市,citys是一个数组。

(19).if (citys.length > 0) {},如果数组长度大于0,那么说明存在城市。

(20).var cityUL = document.createElement("ul"),创建ul元素,用来防止城市。

(21).var maxLength = 0,声明一个变量并赋值为0,它是用来存储ul元素的宽度的。

(22).for (var index = 0; index < citys.length; index++) {},遍历数组中的每一个元素。(23).var cityName = citys[index],获取城市名称。

(24).if (cityName.length > maxLength) {  maxLength = cityName.length;

},如果城市名称的长度大于maxLength,那么就将maxLength值设置为城市名称的长度。

(25).var cityLI = document.createElement("li"),创建li元素对象。

(26).cityLI.id = "cityLI" + index,设置元素的id属性值。

(27).cityLI.innerHTML = "<a href='#'>" + cityName + "</a>",将城市放置于li元素中。

(28).cityUL.appendChild(cityLI),将li元素放置于ul中。

(29).if (maxLength <= 6) {

  maxLength = 100;

}

else {

  maxLength = maxLength * 20;

},如果长度小于等于6,那么就将它的值设置为100。

否则的话长度设置为maxLength * 20。

二.相关阅读:

(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。

(2).onmouseover事件可以参阅javascript的onmouseover事件一章节。

(3).className可以参阅js的className属性详解一章节。

(4).onmouseout事件可以参阅javascript的onmouseout事件详解一章节。

(5).replace()可以参阅javascript的replace()函数用法详解一章节。

(6).document.createElement()可以参阅document.createElement()方法用法介绍一章节。

(7).appendChild()可以参阅javascript的insertBefore()函数和appendChild()用法一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部