关闭

JS下拉框

标签: dropdownfunctionnullborderclassjavascript
717人阅读 评论(0) 收藏 举报
分类:
<html>  
 <BODY>  
 <SELECT   NAME="s1"><option>需要JavaScript才能正确显示</SELECT>  
 <SELECT   NAME="s2"></SELECT>  
 <SELECT   NAME="s3"></SELECT>  
 <SELECT   NAME="s4"></SELECT>  
 <SCRIPT   LANGUAGE="JavaScript">  
 <!--  
 //选择框的名字  
 selector   =   [   "s1",   "s2",   "s3",   "s4"   ];  
 //选择项:   "名字",   "值",   子选择  
 menu   =   [  
 "地球","1",  
   [  
   "中国","86",  
     [  
     "北京","BJ",  
       [  
       "--","1",null  
       ],  
     "四川","SC",  
       [  
       "成都","28",null,  
       "乐山","",null,  
       "攀枝花","",null,  
       "自贡","",null,  
       "德阳","",null,  
       "绵阳","",null  
       ]  
     ],  
   "米国","1",  
     [  
     "加利福尼亚","CA",  
       [  
       "旧金山","1",null,  
       "洛杉矶","2",null  
       ],  
     "华盛顿","WA",  
       [  
       "西雅图","seattle",null  
       ]  
     ]  
   ],  
 "火星","2",  
   [  
   "大峡谷","86",  
     [  
     "小山丘","BJ",  
       [  
       "A地区","28",null,  
       "B地区","",null,  
       "C地区","",null  
       ]  
     ]  
   ]  
 ];  
     
 function   wizz(level)  
 {  
   if(   level   ==   0   )  
     a   =   menu;  
   else  
   {  
     str   =   "menu";  
     for(   i=0;   i<level;   i++   )  
       str   +=   "["   +   (document.all[selector[i]].selectedIndex   *   3   +   2)     +   "]";  
     a   =   eval(str);  
   }  
   if(   a   ==   null   )   return;  
   s   =   document.all[selector[level]];  
   i   =   s.length;  
   while(   i   >   0   )   s.options[--i]   =   null;  
   while(   i   <   Math.floor(a.length/3)   )  
     s.options[i]   =   Option(   a[i*3],   a[i++*3+1]   );  
   s.onchange   =   Function("wizz("   +   (level+1)   +   ")");  
   wizz(level+1);  
 }  
 wizz(0);  
 //-->  
 </SCRIPT>  
 </BODY>  
 </HTML>  



//第二个
<html>  
 <head>  
 <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
 <meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">  
 <meta   name="ProgId"   content="FrontPage.Editor.Document">  
 <meta   name="Author"   content="阿信,fason">  
 <meta   name="KeyWords"   content="下拉框,输入,阿信,fason">  
 <title>漂亮下拉框</title>  
 <style>  
 .selectBox{border:1px   solid   #993300;height:20px;}  
 .editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}  
 .dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px   solid   #993300;padding:0   2;margin:1px;cursor:default}  
 .selectContent{position:absolute;border:1px   solid   #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}  
 .selectContent   tr{height:20px;cursor:default}  
 .selectContent   td{font-size:12px;font-family:Vendana;padding:2   3}  
 .OnFocus{color:#FFFFFF;background-color:#993300}  
 </style>  
 <script   language="javascript">  
 var   CoolSelect=[]  
 var   CurrentTR=null  
 function   MouseOver(trObj){  
 if(!CurrentTR)CurrentTR=trObj  
 CurrentTR.className=""  
 trObj.className="OnFocus"  
 CurrentTR=trObj;  
 }  
   
 function   ButtonOver(BtnObj){  
 BtnObj.style.backgroundColor='#cc3300'  
 }  
 function   ButtonOut(BtnObj){  
 BtnObj.style.backgroundColor='#993300'  
 }  
 function   MouseClick(Index,trObj){  
 with(GetObj(CoolSelect[Index][1])){  
 value=trObj.innerText;  
 style.backgroundColor='#993300'  
 style.color='#FFFFFF'  
 focus()  
 }  
 DropDown(Index)  
 }  
 function   GoURL(trObj){  
 var   url=trObj.getAttribute("url")  
 if(url&&url!="")window.open(url)  
 }  
 function   BoxBlur(InputBox){  
 with(InputBox.style){backgroundColor="";color=''}  
 }  
 function   DropDown(Index){  
 event.cancelBubble=true  
 ContainerReset(Index)  
 var   show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'  
 GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'  
 setPosition(Index)  
 }  
 function   document::onclick(){  
 for(i=0;i<CoolSelect.length;i++){  
 GetObj(CoolSelect[i][2]).style.visibility='hidden'  
 with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""  
 }  
 }  
 function   window::onresize(){  
 for(i=0;i<CoolSelect.length;i++)setPosition(i)  
 }  
   
 function   showTip(Index){  
 var   inputbox=GetObj(CoolSelect[Index][1])  
 var   container=GetObj(CoolSelect[Index][2])  
 var   num=0  
 container.style.visibility="visible"  
 for(i=0;i<container.rows.length;i++){  
 if(container.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)container.rows[i].style.display="none"  
 else   {container.rows[i].style.display="";num++}  
 }  
 if(num==0)container.style.visibility='hidden'  
 }  
 function   ContainerReset(Index){  
 var   container=GetObj(CoolSelect[Index][2])  
 for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""  
 if(CurrentTR)CurrentTR.className=""  
 }  
 function   setPosition(Index){  
 var   s=GetObj(CoolSelect[Index][0])  
 var   container=GetObj(CoolSelect[Index][2])  
 var   l=s.offsetLeft;  
 var   t=s.offsetTop;  
 while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}  
 with(container.style){left=l+1;top=t+GetObj(CoolSelect[Index][0]).offsetHeight}  
 }  
 function   Init(){  
 CoolSelect[0]=["ConTainer1","txt1","select1"]  
 CoolSelect[1]=["ConTainer2","txt2","select2"]  
 for(i=0;i<CoolSelect.length;i++){  
 var   s=GetObj(CoolSelect[i][0])  
 var   container=GetObj(CoolSelect[i][2])  
 container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth  
 setPosition(i)  
 }  
 }  
 function   GetObj(id){return   document.getElementById(id)}  
 </script>  
 </head>  
 <body   onload="Init()">  
 <div   align="center">  
 <table   style="width:250;border:2px   solid   groove;font-size:12px"   border=1   cellspacing=0   cellpadding=0>  
 <tr   bgcolor="green"   style="font-weight:bold;color:#FFFFFF">  
 <td>输入,提示功能示例</td><td>菜单跳转示例</td>  
 </tr>  
     <tr>  
         <td>  
 <table   id="Container1"   class="selectBox"   border="0"   width=100   cellspacing=0   cellpadding=0>  
     <tr>  
         <td><input   name="txt1"   value="   请选择   "   class="editBox"   onblur="BoxBlur(this)"   onclick="DropDown(0)"   onkeyup="showTip(0)"></td>  
         <td   width="1"><span   class="dropdownbutton"   onmouseover="ButtonOver(this)"   onmouseout="ButtonOut(this)"   onclick="DropDown(0)">6</span></td>  
     </tr>  
 </table>  
         </td>  
         <td>  
 <table   id="Container2"   class="selectBox"   border="0"   cellspacing=0   cellpadding=0>  
     <tr>  
         <td><input   name="txt2"   readOnly=true   value="   请选择   "   class="editBox"   onblur="BoxBlur(this)"   onclick="DropDown(1)"   onkeyup="showTip(1)"></td>  
         <td   width="1"><span   class="dropdownbutton"   onmouseover="ButtonOver(this)"   onmouseout="ButtonOut(this)"   onclick="DropDown(1)">6</span></td>  
     </tr>  
 </table>  
         </td>  
     </tr>  
 </table>  
 </div>  
 <table   id="select1"   class="selectContent"   cellspacing=0   cellpadding=0>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(0,this)"   title="作者:Andy">  
         <td>一起走过的日子</td>  
     </tr>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(0,this)"   title="作者:Andy">  
         <td>你是我的温柔</td>  
     </tr>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(0,this)"   title="作者:Andy">  
         <td>你是我的女人</td>  
     </tr>  
 </table>  
 <table   id="select2"   class="selectContent"   cellspacing=0   cellpadding=0>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(1,this);GoURL(this)"   url="http://expert.csdn.net/exp...  
         <td>CSDN论坛</td>  
     </tr>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(1,this);GoURL(this)"   url="http://msdn.microsoft.com/...  
         <td>MSDN参考</td>  
     </tr>  
     <tr   onmouseover="MouseOver(this)"   onclick="MouseClick(1,this);GoURL(this)"   url="http://www.iecn.net"&...  
         <td>IECN论坛</td>  
     </tr>  
 </table>  
 </body>  
 </html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:53906次
    • 积分:856
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:9篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论