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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript Split()方法
Dec 18 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
Vue 数据绑定的原理分析
Nov 16 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实现的构造sql语句类实例
2016/02/03 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简析Python的闭包和装饰器
2016/02/26 Python
Python作用域用法实例详解
2016/03/15 Python
Python中类型检查的详细介绍
2017/02/13 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python如何实现word批量转HTML
2020/09/30 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
幼儿园庆六一游园活动方案
2014/01/29 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
矿泉水广告词
2014/03/20 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
大型公益活动策划方案
2014/08/20 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL