这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现在下拉列表中显示多级树形菜单的方法, 涉及 javascript 属性菜单的定义、构造及遍历等技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
本文实例讲述了 javascript 实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下:
这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用 JS 控制输出,如果你有更好的办法不用 JS 来显示,那最好了,因为像这种菜单用 JS 来实现,多多少少有点麻烦。
运行效果截图如下:
具体代码如下:
- <!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>
- <title>
- 在下拉列表中显示的多级树形菜单
- </title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312">
- <script type="text/javascript">
- var data = new Array();
- data[0] = {
- id: '0',
- pid: '1',
- text: '河北'
- };
- data[1] = {
- id: '1',
- pid: '-1',
- text: '中国'
- };
- data[2] = {
- id: '2',
- pid: '6',
- text: '莫斯科'
- };
- data[3] = {
- id: '3',
- pid: '0',
- text: '河南'
- };
- data[4] = {
- id: '4',
- pid: '0',
- text: '北京'
- };
- data[5] = {
- id: '5',
- pid: '3',
- text: '湖南'
- };
- data[6] = {
- id: '6',
- pid: '-1',
- text: '俄罗斯'
- };
- function TreeSelector(item, data, rootId) {
- this._data = data;
- this._item = item;
- this._rootId = rootId;
- }
- TreeSelector.prototype.createTree = function() {
- var len = this._data.length;
- for (var i = 0; i < len; i++) {
- if (this._data[i].pid == this._rootId) {
- this._item.options.add(new Option(".." + this._data[i].text, this._data[i].id));
- for (var j = 0; j < len; j++) {
- this.createSubOption(len, this._data[i], this._data[j]);
- }
- }
- }
- }
- TreeSelector.prototype.createSubOption = function(len, current, next) {
- var blank = "..";
- if (next.pid == current.id) {
- intLevel = 0;
- var intlvl = this.getLevel(this._data, this._rootId, current);
- for (a = 0; a < intlvl; a++) blank += "..";
- blank += "├-";
- this._item.options.add(new Option(blank + next.text, next.id));
- for (var j = 0; j < len; j++) {
- this.createSubOption(len, next, this._data[j]);
- }
- }
- }
- TreeSelector.prototype.getLevel = function(datasources, topId, currentitem) {
- var pid = currentitem.pid;
- if (pid != topId) {
- for (var i = 0; i < datasources.length; i++) {
- if (datasources[i].id == pid) {
- intLevel++;
- this.getLevel(datasources, topId, datasources[i]);
- }
- }
- }
- return intLevel;
- }
- </script>
- </head>
- <body>
- <select id="myselect">
- </select>
- <script language=javascript type="text/javascript">
- var ts = new TreeSelector(document.getElementById("myselect"), data, -1);
- ts.createTree();
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0415/269977.html