这个效果的js怎么做?

<!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>Untitled Page</title>
 <script language="javascript" type="text/javascript">
       function CategaryChange()
         {
            var ID = "" ;
            var Name = "" ;
            var IDs = "" ;
            var OptionStr = "" ;
            var signle = "" ;
            var state = "" ;
              for(var i=1; i <= 5; i++)
                {
                  ID = document.getElementById(i).id ;
                  IDs = document.getElementById(i).value ;
                  Name = document.getElementById(i).innerHTML ;
                   if (document.getElementById(i).selected == true)
                    {
                      signle = "<option id="+ ID +" value="+ IDs +" selected='selected'>" + Name + "</option>" ;
                      state = "1" ;
                      document.getElementById("categarySecID").value  = IDs ;
                      document.getElementById("categarySecIDName").value = Name ;
                    }
                    else
                     {
                       signle = "<option id="+ ID +" value="+ IDs +">" + Name + "</option>" ; 
                     }
                     OptionStr = OptionStr + signle ;  
                }
                  
           if(state == "1")
            {
             //  alert("num");
               OptionStr = OptionStr +"<option id='others' value='others'>'others'</option>" ;
               //document.getElementById("addTags").style.visibility = "hidden";
            }
            else
             {
              // alert("others");
               OptionStr = OptionStr + "<option id='others' value='others' selected='selected'>'others'</option>" ;
               document.getElementById("categarySecID").value = "others" ; 
               document.getElementById("categarySecIDName").value = "others" ;
               //document.getElementById("addTags").style.visibility = "visible";
             }
             //alert(OptionStr);
         }
         
 function tagsState()
  {
      if(document.getElementById("others").selected == true)
      {
        document.getElementById("addTags").style.visibility = "visible";
      }
      else
      {
        document.getElementById("addTags").style.visibility = "hidden";
      }
  } </script>
</head>
<body onload="tagsState()" >
<select name="select" onchange="CategaryChange();">
<option id="1" value="432">web</option>
<option id="2" value="414">design</option>
<option id="3" value="353">fuck</option>
<option id="4" value="8987">net</option>
<option id="5" value="1231" selected="selected">shit</option>
<option id="others" value="others" >others</option>
</select>
<input type="text" id="categarySecID" value="" />
<input type="text" id="categarySecIDName" value="" />
<div id="addTags" style="visibility:hidden">123</div>
</body>
</html>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script language="Javascript">
    function fnSetSubItem_Combo(objCombo,objSubCombo,arrSubItems,strDefValue){
      var i;
      var bFound;  fnClearCombo(objSubCombo);  bFound=false;
      for(i=0;i<arrSubItems.length;i++){
    if(arrSubItems[i][1] + "" == objCombo.value + ""){
      var oOption = document.createElement("OPTION");
      objSubCombo.options.add(oOption);
      oOption.text = arrSubItems[i][2];
      oOption.value = arrSubItems[i][0];
      if(strDefValue + "" == oOption.value + ""){
    oOption.selected=true;
      }
      bFound=true;
    }
      }

      if(!bFound && objSubCombo.options.length == 0)
    objSubCombo.disabled=true;
      else
    objSubCombo.disabled=false;
      
      if(objSubCombo.onchange)
    objSubCombo.onchange();
    }function fnClearCombo(objCombo){
      var i,intLen;
      if(objCombo.Proced ==1){
        intLen=objCombo.options.length;
        for(i=0;i<intLen-objCombo.FirstIdx;i++){
      objCombo.options[objCombo.FirstIdx]=null;
        }
      }
      else{
        objCombo.FirstIdx=objCombo.options.length;
        objCombo.Proced =1;
      }
    }function fnSetCityProv(objParObj,objSubObj,arrCPC){
      objSubObj.options.length=0;
      for(i=0;i<arrCPC.length;i++){
        if(arrCPC[i][0] == objParObj.value){
      objSubObj.options[objSubObj.options.length]=new Option(arrCPC[i][2],arrCPC[i][0]);
       }
      }  fnGetCPCSubItems(objParObj,objSubObj,arrCPC,objParObj.value,0);
    }

    function fnGetCPCSubItems(objParObj,objSubObj,arrCPC,intParID,intLV){
      var i;
      var strCaption;

      for(i=0;i<arrCPC.length;i++){
        if(arrCPC[i][1] == intParID){
      switch(intLV){
    case 0:strCaption="  --" + arrCPC[i][2];break;
    case 1:strCaption="    --" +arrCPC[i][2];break;
          }   objSubObj.options[objSubObj.options.length]=new Option(strCaption,arrCPC[i][0]);
      if(intLV <= 1)
    fnGetCPCSubItems(objParObj,objSubObj,arrCPC,arrCPC[i][0],intLV+1)
    }
      }
    }
    </script>
    <script language="Javascript">
    function fnCreateArray(intHeight,intWidth){
      var i,arrRet;
      arrRet=new Array(intHeight);
      
      for(i=0;i<intHeight;i++){
        arrRet[i] = new Array(intWidth);
      }
      return arrRet;
    }
    </script><script language="Javascript">
    <!--
    /****城市数组******/
    var arrCity;
    arrCity=fnCreateArray(9,3);
    arrCity[0][0]="1";//子项value
    arrCity[0][1]="001";//父项value
    arrCity[0][2]="--请选择--";//子项text
    arrCity[1][0]="2";
    arrCity[1][1]="001";
    arrCity[1][2]="广州市";
    arrCity[2][0]="3";
    arrCity[2][1]="001";
    arrCity[2][2]="东莞市";arrCity[3][0]="1";
    arrCity[3][1]="002";
    arrCity[3][2]="--请选择--";
    arrCity[4][0]="2";
    arrCity[4][1]="002";
    arrCity[4][2]="南宁市";
    arrCity[5][0]="2";
    arrCity[5][1]="002";
    arrCity[5][2]="桂林市";/**************初始化联动下拉框*****************/
    function fnStart(){
      fnSetSubItem_Combo(document.form1.province,document.form1.city,arrCity,"1");
    }
    window.onload=fnStart;
    //-->
    </script>
    </HEAD><BODY>
    <form name="form1">
    城市：<select name="province" onChange="fnSetSubItem_Combo(this,city,arrCity)" style="width:120px;">
       <option value="001" selected >广东</option>
       <option value="002">广西</option>
     </select><select name="city" style="width:150px;" onchange="if(this.options[this.selectedIndex].text!='--请选择--') text_city.value=this.options[this.selectedIndex].text; else text_city.value='';"></select>
     <input type="text" name="text_city">
    </form>
    </BODY>
    </HTML>