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 相关文章推荐
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
vue实现购物车列表
Jun 30 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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实现计数器方法小结
2015/01/05 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
node使用request请求的方法
2019/12/20 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Django 前后台的数据传递的方法
2017/08/08 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技
详解MySQL的内连接和外连接
2023/05/08 MySQL