终于到了这个部分......
  这个部分需要7个文件:sortArr.js,selectArr.js,inputArr.js,combox.js,pause.js,sort.js,test.htm。
  所使用的数据sortArr.js:
var arrSorts = new Array(35);
arrSorts[0] = ["1", "主类别一", "0", "1"];
arrSorts[1] = ["2", "主类别二", "0", "1"];
arrSorts[2] = ["3", "主类别三", "0", "1"];
arrSorts[3] = ["4", "小类一", "1", "2"];
arrSorts[4] = ["5", "小类二", "1", "2"];
arrSorts[5] = ["6", "小类三", "1", "2"];
arrSorts[6] = ["7", "细类一", "4", "3"];
arrSorts[7] = ["8", "细类二", "4", "3"];
arrSorts[8] = ["9", "细类三", "4", "3"];
arrSorts[9] = ["10", "小类四", "2", "2"];
arrSorts[10] = ["11", "小类五", "2", "2"];
arrSorts[11] = ["12", "小类六", "2", "2"];
arrSorts[12] = ["13", "细类四", "5", "3"];
arrSorts[13] = ["14", "细类五", "5", "3"];
arrSorts[14] = ["15", "末类一", "7", "4"];
arrSorts[15] = ["16", "末类二", "7", "4"];
arrSorts[16] = ["17", "末类三", "7", "4"];
arrSorts[17] = ["18", "终极类一", "15", "5"];
arrSorts[18] = ["19", "终极类二", "15", "5"];
arrSorts[19] = ["20", "终极类三", "15", "5"];
arrSorts[20] = ["21", "终极类四", "16", "5"];
arrSorts[21] = ["22", "终极类五", "16", "5"];
arrSorts[22] = ["23", "终极类六", "16", "5"];
arrSorts[23] = ["24", "末类四", "8", "4"];
arrSorts[24] = ["25", "末类五", "8", "4"];
arrSorts[25] = ["26", "末类六", "8", "4"];
arrSorts[26] = ["27", "末类七", "9", "4"];
arrSorts[27] = ["28", "末类八", "9", "4"];
arrSorts[28] = ["29", "末类九", "9", "4"];
arrSorts[29] = ["30", "终极类七", "17", "5"];
arrSorts[30] = ["31", "终极类八", "17", "5"];
arrSorts[31] = ["32", "终极类九", "17", "5"];
arrSorts[32] = ["33", "终极类十", "24", "5"];
arrSorts[33] = ["34", "终极类十一", "24", "5"];
arrSorts[34] = ["35", "终极类十二", "24", "5"];
arrSorts[35] = ["36", "终极类十三", "24", "5"];
  数组保存指定的select,selectArr.js:
var selectArr=new Array();
selectArr.push("test1");
selectArr.push("test2");
selectArr.push("test3");
selectArr.push("test4");
selectArr.push("test5");
var selectArr2=new Array();
selectArr2.push("test6");
selectArr2.push("test7");
selectArr2.push("test8");
selectArr2.push("test9");
//selectArr2.push("test10");
  编辑框用数组保存inputArr.js:
var inputArr=new Array();
inputArr.push("testInput1");
inputArr.push("testInput2");
inputArr.push("testInput3");
inputArr.push("testInput4");
  可编辑下拉框类combox.js:
/**
 *可编辑下拉框对象类
 *
 *可编辑下拉框,其实就是在下拉框的上面放了个无边框的输入框,在输入框输数据时,下拉框自动定位,
 *下拉框选中某项时,下拉框的值赋给输入框,从而产生错觉
 *
 *@author zxub 2005-8-22
 */
function combox(_inpuObjName,_controlSelectName)
{
    //生成的输入框对象名称
    this.inpuObjName=_inpuObjName;
 //生成的输入框对象
 this.inputbox=null;
    //原来的下拉框对象
    this.controlSelect=document.getElementById(_controlSelectName);
 
    //初始化对象
 //_comboxObj:combox对象,须指向自己
    this.init=function(_comboxObj)
    {       
  this.inputbox=document.createElement("input");
  this.inputbox.id=this.inpuObjName;
  this.inputbox.comboxObj=_comboxObj;       
  this.inputbox.onchange=function()
  {
   this.comboxObj.find();
  }
  with(this.inputbox.style)
  {
   width=this.controlSelect.offsetWidth-16;
   height=this.controlSelect.offsetHeight;
  }       
  this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox);
        _span=document.createElement("span");
        _span.style.width=18;
        this.controlSelect.insertAdjacentElement("beforeBegin",_span);
        _span.appendChild(this.controlSelect);
        _container=document.createElement("span");
        this.inputbox.insertAdjacentElement("beforeBegin",_container);
        _container.appendChild(this.inputbox);
        _container.appendChild(_span);
        _container.style.width=this.inputbox.offsetWidth+18;
        _width=this.controlSelect.offsetWidth-18;
        with (this.controlSelect.style)
        {
            margin="0 0 0 -"+_width;
        }
  this.controlSelect.comboxObj=_comboxObj;
        this.controlSelect.oldOnchange=this.controlSelect.onchange;
        this.controlSelect.onchange=function()
  {
   this.comboxObj.change();
            this.oldOnchange();
  }
        this.change();
    }
    //当搜索到输入框的值时,下拉框自动定位/
    this.find=function()
    {
        with (this.controlSelect)
        {
            for(i=0;i<options.length;i++)
                if(options[i].text.indexOf(this.inputbox.value)==0)
                {
                    selectedIndex=i;
                    this.change();
                    break;
                }
        }
    }
    //定义下拉框的onchange事件
    this.change=function()
    {
        this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text;
        with (this.inputbox)
        {
            select();
            focus();
        }
    }
}
/**
 * 定位函数,获取控件绝对坐标
 */
function getLeftPos(e)
{
    var left=e.offsetLeft;
    while (e=e.offsetParent)
    {
        left+=e.offsetLeft;
    }
    return left;
}
function getTopPos(e)
{
    var top=e.offsetTop;
    while (e=e.offsetParent)
    {
        top+=e.offsetTop;
    }
    return top;
}
  在javascript中,想暂停某件事,还是不容易的,需要用到下面的函数pause.js:
     //函数暂停
     function pause(obj,lastingTime)
     {         
          if (window.eventList==null) window.eventList=new Array();
          var ind=-1;
          for (var i=0;i<window.eventList.length;i++)
          {
              if (window.eventList[i]==null)
              {
                  window.eventList[i]=obj;
                  ind=i;
                  break;
              }
          }         
          if (ind==-1)
          {
              ind=window.eventList.length;
              window.eventList[ind]=obj;
          }
          setTimeout("goOn("+ind+")",lastingTime);
     }

     //函数继续
     function goOn(ind)
     {        
         var obj=window.eventList[ind];
         window.eventList[ind]=null;
         //调用被暂停的函数的nextStep方法,如果没有这个方法则重新调用该函数
         if (obj.nextStep)
         {
             obj.nextStep();
         }
         else obj();
     }
  主要的类sort.js,有点改动的:
/**
 * 无限级联动选择菜单类
 * _storeValueObjName:存放选择项值的页面元素名称
 * _showSelectObjName:显示该菜单的页面元素名称
 * _sortArr:显示菜单所需的数组,格式如下
 * arrSorts[0] = ["类别ID1", "类别一", "父类ID1", "深度1"];
 * arrSorts[1] = ["类别ID2", "类别二", "父类ID2", "深度2"];
 *
 * @author zxub 2005-8-23
 */
function sortMenu(_storeValueObjName, _sortArr, _selectArr, _inputArr)
{
 this.storeValueObj=document.getElementById(_storeValueObjName);
 this.sortArr=_sortArr;
    this.selectArr=_selectArr;
    this.maxDepth=_selectArr.length;
    this.inputArr=_inputArr;
    this.comboxes=new Array();

    //下列变量是程序暂停时,用于保存变量
    //记录处理的编辑框的索引
    this.index=null;
    //暂停时处理记录的父ID
    this.parentID=null;
    //暂停时用于指向自己的指针
    this.self=null;
    //定义结束

 /**
  * 获取第一层分类,并显示在showSelectObj中
  * _sortMenuObj:sortMenu的实例对象,指向自己
  */
 this.initSorts=function(_sortMenuObj)
 {
        for (i=1;i<this.maxDepth;i++)
        {
            document.getElementById(this.selectArr[i]).style.display="none";
        }
        this.storeValueObj.value=0;
        _select=document.getElementById(this.selectArr[0]);       
        _select.sortMenuObj=_sortMenuObj;
        _select.onchange=function()
        {
            this.sortMenuObj.setSorts(this,this.sortMenuObj);
        }
        _select.add(new Option("请选择...",""));
  for (var i = 0; i < this.sortArr.length; i++)
  {
   if (this.sortArr[i][2] == 0)
   {
                _select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
   }
  }
        _select.depth=1;
        this.comboxes[0]=new combox(this.inputArr[0],this.selectArr[0]);
        this.comboxes[0].init(this.comboxes[0]);
 }

    this.getSelectIndex=function(_selectName)
    {
        _index=null;
        for (i=0;i<this.maxDepth;i++)
        {
            if (this.selectArr[i]==_selectName)
            {
                _index=i;
                break;
            }
        }
        return _index;
    }

 /**
  * 下拉框联动
  * _curSelect:当前选择的下拉框
     * _sortMenuObj:sortMenu的实例对象,指向自己
  */
 this.setSorts=function(_curSelect,_sortMenuObj)
 {       
        //若当前下拉框后面还有下拉框,即有下级下拉框时,清除下级下拉框,在后面会重新生成下级部分
        for (i=_curSelect.depth;i<this.maxDepth;i++)
        {
            _select=document.getElementById(this.selectArr[i]);
            while(_select.length>0)
                _select.remove(0);
            _select.style.display="none";           
            try
            {
                _inputbox=document.getElementById(this.inputArr[i]);
             _inputbox.style.display="none";
                _inputbox.value="";
            }
            catch (e)
            {
                //由前往后的时候,由于input没生成,所以会有错误,这里跳过
            }           
        }       
        //获取当前选项的值
  _iValue = _curSelect.options[_curSelect.selectedIndex].value;
  //如果选择的是下拉框第一项(第一项的值为"")
  if (_iValue == "")
  {           
   //若存在上级下拉框
   if (_curSelect.depth>1)
   {
                _parent=document.getElementById(this.selectArr[_curSelect.depth-2]);
    //取值为上级下拉框选中值
    this.storeValueObj.value = _parent.options[_parent.selectedIndex].value;
   }
   else
   {
    //没上级则取值为0
    this.storeValueObj.value = 0;
   }           
   //选择第一项(请选择...),没有下级选项,所以要返回           
   return false;
  }
  //选择的不是第一项
  this.storeValueObj.value = _iValue;
        if (_curSelect.depth==_sortMenuObj.maxDepth)
        {
            return false;
        }
  //去掉当前下拉框原来的选择状态
        //将选中的选项对应代码更改为 selected
        for (i=0;i<_curSelect.options.length;i++)
        {
            if (_curSelect.options[i].selected=="selected")
            {
                _curSelect.options[i].removeAttribute("selected");
            }
            if (_curSelect.options[i].value==_iValue)
            {
                _curSelect.options[i].selected="selected";
            }
        }
        //新生成的下级下拉列表
        _hasChild=false;
        for (var i = 0; i < this.sortArr.length; i++)
  {
            if (this.sortArr[i][2] == _iValue)
            {
                if (_hasChild==false)
                {
                    _siblingSelect=document.getElementById(this.selectArr[_curSelect.depth]);                   
                    _siblingSelect.sortMenuObj=_sortMenuObj;
                    _siblingSelect.style.display="";
                    try
                    {
                     _inputbox=document.getElementById(this.inputArr[_curSelect.depth]);
                        _inputbox.style.display="";
                        _inputbox.value="请选择...";
                    }
                    catch (e)
                    {
                        //由前往后的时候,由于input没生成,所以会有错误,这里跳过
                    }                   
                    _siblingSelect.depth=parseInt(_curSelect.depth)+1;
                    if (_siblingSelect.oldOnchange==null)
                    {
                        _siblingSelect.onchange=function()
                        {
                            this.sortMenuObj.setSorts(this,this.sortMenuObj);
                        }
                    }                   
                    _siblingSelect.add(new Option("请选择...",""));
                    _siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
                    _hasChild=true;                   
                }
                else
                {                  
                    _siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
                }
            }
        }
  if (_hasChild)
  {
   _combox=this.comboxes[parseInt(_curSelect.depth)];
   if (_combox==null)
   {
    _combox=new combox(this.inputArr[parseInt(_curSelect.depth)],this.selectArr[parseInt(_curSelect.depth)]);
    this.comboxes[parseInt(_curSelect.depth)]=_combox;
    _combox.init(_combox);
   }
  }       
 }

 /**
  * 根据最小类选取值生成整个联动菜单,由后往前递归完成
  * _minCataValue:最小类的取值
     * _sortMenuObj:sortMenu的实例对象,指向自己
  */
    this.hideChildInNewInit=false;
 this.newInit=function(_minCataValue,_sortMenuObj)
 {      
        if (this.storeValueObj.value=="undefined" || this.storeValueObj.value=="")
        {
            this.storeValueObj.value=_minCataValue;
        }
  if (_minCataValue == 0)
  {
   //minCataValue为0,也就是初始化了
   this.initSorts(_sortMenuObj);
   //初始化完成后,退出函数
   return false;
  }
        //父级ID
  _parentID=null;
        _depth=null;
        for (var i = 0; i < this.sortArr.length; i++)
  {
   if (_minCataValue == this.sortArr[i][0])
   {
                _depth=this.sortArr[i][3];
    _parentID = this.sortArr[i][2];
    break;
   }
  }
        if (!this.hideChildInNewInit)
        {
            for (i=_depth;i<this.maxDepth;i++)
            {
                document.getElementById(this.selectArr[i]).style.display="none";
            }
            this.hideChildInNewInit=true;
        }
       
        if (_depth>this.maxDepth)
        {
            //alert("下拉框只能构成"+this.maxDepth+"级关系,而当前值处于第"+_depth+"级关系中!");
            //alert("初始化下拉框为原始状态");
            this.initSorts(_sortMenuObj);
            return false;
        }
  _select=document.getElementById(this.selectArr[_depth-1]);
        _select.depth=_depth;
        _select.sortMenuObj=_sortMenuObj;
        _select.onchange=function()
        {
            this.sortMenuObj.setSorts(this,this.sortMenuObj);
        }
        _select.add(new Option("请选择...","")); 
  
  for (var i = 0; i < this.sortArr.length; i++)
  {
   if (this.sortArr[i][2] == _parentID)
   {
    if (this.sortArr[i][0] == _minCataValue)
    {
                    _opt=new Option(this.sortArr[i][1],this.sortArr[i][0]);
                    _select.add(_opt);
                    _opt.selected="selected";
    }
    else     
    {
                    _select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
                }
   }
  }
        this.index=parseInt(_depth)-1;
        this.parentID=_parentID;
        this.self=_sortMenuObj;
        pause(this,10);  
 }

    this.nextStep=function()
    {
        _combox=this.comboxes[this.index];
        if (_combox==null)
        {
            _combox=new combox(this.inputArr[this.index],this.selectArr[this.index]);
   this.comboxes[this.index]=_combox;
            _combox.init(_combox);
        }
        if (this.parentID > 0)
  {
   this.newInit(this.parentID,this.self);
  }
    }
}
  最后是测试页面tset.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="pause.js"></script>
<script language="javascript" src="combox.js"></script>
<script language="javascript" src="sortArr.js"></script>
<script language="javascript" src="selectArr.js"></script>
<script language="javascript" src="inputArr.js"></script>
<script language="javascript" src="sort.js"></script>
</HEAD>

<BODY>
<!--<select name=test1></select>
<select name=test2></select>
<select name=test3></select>
<select name=test4></select>
<select name=test5></select>
<input id=testValue name=testValue>-->
<select name=test6></select>
<select name=test7></select>
<select name=test8></select>
<select name=test9></select>
<input id=testValue2 name=testValue2>
<!--<INPUT TYPE="button" value="test" onclick="if (document.getElementById('selBox').lastChild.selectedIndex==0) alert('还有子类没选择!')">-->
<script language="javascript">
  //var a=new sortMenu("testValue",arrSorts,selectArr);
  //a.initSorts(a);
  var b=new sortMenu("testValue2",arrSorts,selectArr2,inputArr);
  b.newInit(8,b);
</script>
</BODY>
</HTML>
  ok,这个算复杂点的了。下次我再讲个无限分类树型结构显示的类,嘿嘿。
  

 posted on 2005-10-12 22:32  往事如风  阅读(3182)  评论(3编辑  收藏  举报