三层联动选择框

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title >sample </ title >
</ head >

< body >
< select  id ="ddlGameName"  onChange ="game_onchange_callback(this.options.value)" ></ select >
< select  id ="ddlArea"  onChange ="area_onchange_callback(this.options.value)" ></ select >< select  id ="ddlServer" ></ select >
< script  language ="javascript" >
<!--
function  Hashtable() {
     this ._hash  =   new  Object();
     // add()
     this .add  =   function (key,value){
         if ( typeof (key) != " undefined " ){
             if ( this .contains(key) == false ){
                 this ._hash[key] = typeof (value) == " undefined " ? null :value;
                 return   true ;
            }  else  {
                 return   false ;
            }
        }  else  {
             return   false ;
        }
    }
     // remove()
     this .remove  =   function (key){ delete   this ._hash[key];}
     // count
     this .count  =   function (){ var  i = 0 ; for ( var  k  in   this ._hash){i ++ ;}  return  i;}
     // items
     this .items  =   function (key){ return   this ._hash[key];}
     // contains
     this .contains  =   function (key){  return   typeof ( this ._hash[key]) != " undefined " ;}
     // clear
     this .clear  =   function (){ for ( var  k  in   this ._hash){ delete   this ._hash[k];}}
}

var  gameString  =   " --请选择--|,挑战|挑战;1,EVE|EVE;2,魔兽世界|魔兽世界;3,其它游戏|其它游戏;0 " ;
var  gameArray  =  gameString.split(',');

var  areaHT  =   new  Hashtable();
areaHT.add( " 1 " , " --请选择--,上海电信一,上海电信二,绿色网通一 " );
areaHT.add( " 2 " , " --请选择--,电信 " );
areaHT.add( " 3 " , " --请选择--,世界一,世界二 " );

var  serverHT  =   new  Hashtable();
serverHT.add( " 1上海电信一 " , " 一线,二线,三线 " );
serverHT.add( " 1上海电信二 " , " 一线,二线 " );
serverHT.add( " 1绿色网通一 " , " 一线 " );
serverHT.add( " 2电信 " , " 1 " );
serverHT.add( " 3世界一 " , " 1,2,3,4,5,6 " );
serverHT.add( " 3世界二 " , " 1,2,3,4 " );

var  gameObjID  =   " ddlGameName " ;
var  areaObjID  =   " ddlArea " ;
var  serverObjID  =   " ddlServer " ;

function  GetNameFromString(str)
{
     return  str.split(' | ')[ 0 ];
}

function  GetIDFromString(str)
{
     return  str.split(' | ')[ 1 ];
}

function  GetObjectById(objID)
{
     return  document.getElementById(objID);
}

function  ClearList(objID)
{
    GetObjectById(objID).options.length  =   0 ;
    GetObjectById(objID).options[ 0 ]  =   new  Option( "" ,  "" );
}

function  game_onchange_callback(val)
{
     if  (val  ==   ""   ||  val.split(';')[ 1 ]  ==   " 0 " ) {
        ClearList(areaObjID);
        ClearList(serverObjID);
         return ;
    }
    InitArea(val.split(';')[ 1 ]);
    ClearList(serverObjID);
}

function  area_onchange_callback(val)
{
     if  (val  ==   " --请选择-- " ) {
        ClearList(serverObjID);
         return ;
    }
    InitServer(val);
}

function  InitGame()
{
    GetObjectById(gameObjID).options.length  =   0 ;
     for  ( var  i = 0 ; i < gameArray.length;  ++ i)
    {
        gameStr  =  gameArray[i];
        GetObjectById(gameObjID).options[i]  =   new  Option(GetNameFromString(gameStr), GetIDFromString(gameStr));
    }
}

function  InitArea(gameID)
{
     var  ary  =  areaHT.items(gameID).split(',');
    GetObjectById(areaObjID).options.length  =   0 ;
     for  ( var  i = 0 ; i < ary.length;  ++ i)
    {
        str  =  ary[i];
        GetObjectById(areaObjID).options[i]  =   new  Option(str, str);
    }
}

function  InitServer(areaName)
{
     var  gameObj  =  GetObjectById(gameObjID);
     var  complexID  =  gameObj.options[gameObj.options.selectedIndex].value.split(';')[ 1 ]  +  areaName;
     var  ary  =  serverHT.items(complexID).split(',');
    GetObjectById(serverObjID).options.length  =   0 ;
     for  ( var  i = 0 ; i < ary.length;  ++ i)
    {
        str  =  ary[i];
        GetObjectById(serverObjID).options[i]  =   new  Option(str, str);
    }
}

InitGame();
// -->
</ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/netflu/archive/2006/09/07/498005.html