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 学习笔记(一)DOM基本操作
Apr 08 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
js调用css属性写法
2013/09/21 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python多进程fork()函数详解
2019/02/22 Python
python实现列表的排序方法分享
2019/07/01 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python 模块导入问题汇总
2021/02/01 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
给国外客户的邀请函
2014/01/30 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
优秀教师个人材料
2014/12/15 职场文书
个人原因辞职信模板
2015/05/13 职场文书
教师节座谈会主持词
2015/07/03 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers