javascript实现dom动态创建省市纵向列表菜单的方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法。分享给大家供大家参考。具体实现方法如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 (i = 0; i < allli.length; i++) {
      node = allli[i];
      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);    //添加省份li
    //================添加城市========================
    var citys = provs[key];
    if (citys.length > 0) {
      var cityUL = document.createElement("ul");
      var maxLength = 0; //存放最大城市内容的长度,以便后面设置cityUL的最大宽度,达到宽度自适应
      for (var i = 0; i < citys.length; i++) {
        var cityName = citys[i];
        if (cityName.length > maxLength) {
          maxLength = cityName.length; //提取最大长度的城市
        }
        var cityLI = document.createElement("li");
        cityLI.id = "cityLI" + i;
        cityLI.innerHTML = "<a href='#'>" + cityName + "</a>";
        cityUL.appendChild(cityLI);
      }
      if (maxLength <= 6) {
        maxLength = 100;
      }
      else {
        maxLength = maxLength * 20;
        //这里乘以20主要是按一个字20px来算
      }
      maxLength = maxLength + "px"; //加上像素的px后缀
      cityUL.style.width= maxLength; //设置cityUL的最大宽度
      provLi.appendChild(cityUL); //添加城市UL
    }
    nIndex++;
  }
  iniEvent();  //初始化事件
}
</script>
</head>
<body onload ="loadData()">
<div id="menu">
<ul id="prov">
</ul>
</div>  
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
详解javascript replace高级用法
Feb 17 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
js实现星星打分效果
Jul 05 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
jQuery的基本概念与高级编程
May 14 #Javascript
javascript实现简单的省市区三级联动
May 14 #Javascript
javascript实现仿腾讯游戏选择
May 14 #Javascript
JavaScript实现Flash炫光波动特效
May 14 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python File readlines() 使用方法
2018/03/19 Python
python修改FTP服务器上的文件名
2019/09/11 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
护士的岗位职责
2013/12/04 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
优质服务活动实施方案
2014/05/02 职场文书
委托书的格式
2014/08/01 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
信用卡工作证明范本
2015/06/19 职场文书
生产车间管理制度
2015/08/04 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
python opencv通过按键采集图片源码
2021/05/20 Python
浅谈Python协程asyncio
2021/06/20 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js