[转]无限联动下拉框

转自:往事如风

前段时间,由于项目原因,需要实现无限分类,就设计了一个无限分类的数据结构,然后又有了联动的要求,上网找了好久,没找到合适的,基本上都是定了级数的,要不就是不怎么好用的,只好自己写了,用到的数据结构当然就是实现无限分类的那张表的结构了,嘿嘿。
  下面这个是个简单的无限分类联动下拉框类,在我后面的文章,会介绍更复杂的:-)。
  好了,代码就这些了,大家可以存下来,运行就可以看到效果的。
  有三个文件:sort.js,sortArr.js,test.htm。
  sortArr.js就是所需要的数据:
var arrSorts = new Array(35);
arrSorts[
0= ["1""主类别一""0"];
arrSorts[
1= ["2""主类别二""0"];
arrSorts[
2= ["3""主类别三""0"];
arrSorts[
3= ["4""小类一""1"];
arrSorts[
4= ["5""小类二""1"];
arrSorts[
5= ["6""小类三""1"];
arrSorts[
6= ["7""细类一""4"];
arrSorts[
7= ["8""细类二""4"];
arrSorts[
8= ["9""细类三""4"];
arrSorts[
9= ["10""小类四""2"];
arrSorts[
10= ["11""小类五""2"];
arrSorts[
11= ["12""小类六""2"];
arrSorts[
12= ["13""细类四""5"];
arrSorts[
13= ["14""细类五""5"];
arrSorts[
14= ["15""末类一""7"];
arrSorts[
15= ["16""末类二""7"];
arrSorts[
16= ["17""末类三""7"];
arrSorts[
17= ["18""终极类一""15"];
arrSorts[
18= ["19""终极类二""15"];
arrSorts[
19= ["20""终极类三""15"];
arrSorts[
20= ["21""终极类四""16"];
arrSorts[
21= ["22""终极类五""16"];
arrSorts[
22= ["23""终极类六""16"];
arrSorts[
23= ["24""末类四""8"];
arrSorts[
24= ["25""末类五""8"];
arrSorts[
25= ["26""末类六""8"];
arrSorts[
26= ["27""末类七""9"];
arrSorts[
27= ["28""末类八""9"];
arrSorts[
28= ["29""末类九""9"];
arrSorts[
29= ["30""终极类七""17"];
arrSorts[
30= ["31""终极类八""17"];
arrSorts[
31= ["32""终极类九""17"];
arrSorts[
32= ["33""终极类十""24"];
arrSorts[
33= ["34""终极类十一""24"];
arrSorts[
34= ["35""终极类十二""24"];
arrSorts[
35= ["36""终极类十三""24"];

  用了别人现成的数据,表示感谢。
  sort.js就是主要部分了,我写成了类的形式。
/**
 * 无限级联动选择菜单类
 * _storeValueObjName:存放选择项值的页面元素名称
 * _showSelectObjName:显示该菜单的页面元素名称
 * _sortArr:显示菜单所需的数组,格式如下
 * arrSorts[0] = ["类别ID1", "类别一", "父类ID1"];
 * arrSorts[1] = ["类别ID2", "类别二", "父类ID2"];
 *
 * @author zxub 2005-8-23
 
*/

function sortMenu(_storeValueObjName, _showSelectObjName, _sortArr)
{
 
this.storeValueObj=document.getElementById(_storeValueObjName);
    
this.showSelectObj=document.getElementById(_showSelectObjName);
 
this.sortArr=_sortArr;

 
/**
  * 获取第一层分类,并显示在showSelectObj中
  * _sortMenuObj:sortMenu的实例对象,指向自己
  
*/

 
this.initSorts=function(_sortMenuObj)
 
{
        
this.storeValueObj.value=0;
        _select
=document.createElement("select");
        
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
        _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]));
   }

  }
  
 }


 
/**
  * 下拉框联动
  * _curSelect:当前选择的下拉框
     * _sortMenuObj:sortMenu的实例对象,指向自己
  
*/

 
this.setSorts=function(_curSelect,_sortMenuObj)
 
{
  
//若当前下拉框后面还有下拉框,即有下级下拉框时,清除下级下拉框,在后面会重新生成下级部分
  //下级下拉框与当前下拉框由于都是显示在showSelectObj中,故它们是兄弟关系,所以用nextSibling获取
  while (_curSelect.nextSibling)
  
{
   _curSelect.parentNode.removeChild(_curSelect.nextSibling);
  }

  
  
//获取当前选项的值
  _iValue = _curSelect.options[_curSelect.selectedIndex].value;
  
//如果选择的是下拉框第一项(第一项的值为"")
  if (_iValue == "")
  
{
   
//若存在上级下拉框
   if (_curSelect.previousSibling)
   
{
    
//取值为上级下拉框选中值
    this.storeValueObj.value = _curSelect.previousSibling.options[_curSelect.previousSibling.selectedIndex].value;
   }

   
else
   
{
    
//没上级则取值为0
    this.storeValueObj.value = 0;
   }

   
//选择第一项(请选择),没有下级选项,所以要返回
   return false;
  }

  
//选择的不是第一项
  this.storeValueObj.value = _iValue;
  
  
//去掉当前下拉框原来的选择状态
        //将选中的选项对应代码更改为 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.createElement("select");
                    
this.showSelectObj.insertAdjacentElement("beforeEnd",_siblingSelect);
                    _siblingSelect.sortMenuObj
=_sortMenuObj;
                    _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]));
                }

            }

        }

 }


 
/**
  * 根据最小类选取值生成整个联动菜单,由后往前递归完成
  * _minCataValue:最小类的取值
     * _sortMenuObj:sortMenu的实例对象,指向自己
  
*/

 
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;
        _select
=document.createElement("select");
        _select.sortMenuObj
=_sortMenuObj;
        _select.onchange
=function()
        
{
            
this.sortMenuObj.setSorts(this,this.sortMenuObj);
        }

        
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
        _select.add(
new Option("请选择","")); 
  
for (var i = 0; i < this.sortArr.length; i++)
  
{
   
if (_minCataValue == this.sortArr[i][0])
   
{
    _parentID 
= this.sortArr[i][2];
    
break;
   }

  }

  
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]));
                }

   }

  }
  
  
if (_parentID > 0)
  
{
   
this.newInit(_parentID,_sortMenuObj);
  }

 }

}



  最后是测试用页面test.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="sortArr.js"></script>
<script language="javascript" src="sort.js"></script>
</HEAD>

<BODY>
<id=abc>&nbsp;</P><INPUT id=txtSortID name=txtSortID> 
<id=selBox>&nbsp;</P><INPUT id=SortID name=SortID>
<script language="javascript">
 
var a=new sortMenu("txtSortID","abc",arrSorts);
 a.newInit(
0,a);
 
var b=new sortMenu("SortID","selBox",arrSorts);
 b.newInit(
36,b);
</script>
<INPUT TYPE="button" value="test" onclick="if (document.getElementById('selBox').lastChild.selectedIndex==0) alert('还有子类没选择!')">
</BODY>
</HTML>


这个联动只需要指定容器和存放选中值的页面控件名称,有问题可以联系我。
  ok,任务完成,撤退。
posted @ 2006-04-21 21:59  李振波  阅读(824)  评论(0编辑  收藏  举报