下拉框展示树形菜单

2013-08-13

下拉框显示树形菜单!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org

下拉框显示树形菜单
<!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: '俄罗斯'};
data[7] = {id: '7',pid: '1',text: '湖南'};
data[8] = {id: '8',pid: '7',text: '益阳'};
data[9] = {id: '9',pid: '8',text: '南县'};
data[10] = {id: '10',pid: '9',text: '茅草街'};
data[11] = {id: '11',pid: '10',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>
http://blog.163.com/wm_at163/blog/static/132173490201062574052677/

热点排行

Web前端

下拉框展示树形菜单