级联选择控件 JS

级联选择控件 JS

 

<! 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" > ...
<!--
    var cities = new Array(4);
    cities["Australia"] = ["Sydney","Melbourne"];
    cities["France"] = ["Paris","Lyon"];
    cities["Japan"] = ["Tokyo","Kyoto"];
    cities["New Zealand"] = ["Auckland","Wellington"];

    function removeOption(optionMenu)
    ...{
    for (var i=0;i<optionMenu.options.length ;i++ )
    ...{
    optionMenu.options[i] = null;
    }
    }

    function addOptions(optionList,optionMenu)
    ...{
   removeOption(optionMenu);
   for (var i=0;i < optionList.length ;i++ )
   ...{
      optionMenu[i] = new Option(optionList[i],optionList[i]);

   }
    }
//-->
</ SCRIPT >
  </ HEAD >

  < BODY >
   < FORM  METHOD =POST  ACTION =""  name ="testform" >
国家：     < SELECT  NAME ="country"  onchange ="addOptions(cities[this.options[this.selectedIndex].text],document.testform.city);" >
         < OPTION  VALUE =""  SELECTED > Australia </ option >
         < OPTION  VALUE ="" > France </ OPTION >
         < OPTION  VALUE ="" > Japan </ OPTION >
         < OPTION  VALUE ="" > New Zealand </ OPTION >
     </ SELECT >

     < br >
    城市 < SELECT  NAME ="city" >
         < OPTION  VALUE ="" > Sydney </ OPTION >
         < OPTION  VALUE ="" > Melbourne </ OPTION >
     </ SELECT >
   </ FORM >
  </ BODY >
</ HTML >