1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <meta name="GENERATOR" content="Microsoft FrontPage 4.0">  
  5. <meta name="ProgId" content="FrontPage.Editor.Document">  
  6. <META content="fason,阿信" name=Author>  
  7. <META content="提示,下拉框" name=Keywords>  
  8. <title>动态提示的下拉框</title>  
  9. <style>  
  10. a{color:red;text-decoration:none;font-size:12px}  
  11. </style>  
  12. </head>  
  13. <body οnlοad="Init()" bgcolor="#3366cc">  
  14. <center>  
  15. <h2>动态提示的下拉框</h2>  
  16. <hr>  
  17. <form name=frm>  
  18. <table>  
  19. <tr>  
  20. <td>  
  21. <input name="txt" style="width:100px" οnkeyup="SelectTip(0)">  
  22. <input type="button" value="reset" οnclick="SelectTip(1)"></td>  
  23. </tr>  
  24. <tr>  
  25. <td>  
  26. <span id="demo"><select name="demo" style="width:100px" size=10 οnchange="txt.value=options[selectedIndex].text;"></select></span>  
  27. </td>  
  28. </tr>  
  29. </form>  
  30. </table>  
  31. <hr>  
  32. <script language="javascript">  
  33. /*测试用*/  
  34. for(i=0;i<100;i++)  
  35. document.frm.demo.options[document.frm.demo.length]=new Option(String(Math.random()).substr(2,8))  
  36.  
  37. var TempArr=[];//存贮option 
  38.  
  39. function Init(){  
  40. var SelectObj=document.frm.elements["demo"]  
  41. /*先将数据存入数组*/  
  42. with(SelectObj)  
  43. for(i=0;i<length;i++) TempArr[i]=[options[i].text,options[i].value]  
  44. }  
  45.  
  46. function SelectTip(flag){  
  47. var TxtObj=document.frm.elements["txt"]  
  48. var SelectObj=document.getElementById("demo")  
  49. var Arr=[]  
  50. with(SelectObj){  
  51. var SelectHTML=innerHTML.match(/<[^>]*>/)[0]  
  52. for(i=0;i<TempArr.length;i++)  
  53. if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化  
  54. Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>" 
  55. innerHTML=SelectHTML+Arr.join()+"</SELECT>" 
  56. }  
  57. }  
  58. </script>  
  59. </body>  
  60. </html>