可以选择的下拉框

  1. 要完成此效果需要三个步骤
  2. 第一步:把如下代码加入到<head>区域中
  3. <SCRIPT LANGUAGE="JavaScript">
  4. <!-- Begin
  5. function SelObj(formname,selname,textname,str) {
  6. this.formname = formname;
  7. this.selname = selname;
  8. this.textname = textname;
  9. this.select_str = str || '';
  10. this.selectArr = new Array();
  11. this.initialize = initialize;
  12. this.bldInitial = bldInitial;
  13. this.bldUpdate = bldUpdate;
  14. }
  15. function initialize() {
  16. if (this.select_str =='') {
  17. for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
  18. this.selectArr[i] = document.forms[this.formname][this.selname].options[i];
  19. this.select_str += document.forms[this.formname][this.selname].options[i].value+":"+
  20. document.forms[this.formname][this.selname].options[i].text+",";
  21. }
  22. }
  23. else {
  24. var tempArr = this.select_str.split(',');
  25. for(var i=0;i<tempArr.length;i++) {
  26. var prop = tempArr[i].split(':');
  27. this.selectArr[i] = new Option(prop[1],prop[0]);
  28. }
  29. }
  30. return;
  31. }
  32. function bldInitial() {
  33. this.initialize();
  34. for(var i=0;i<this.selectArr.length;i++)
  35. document.forms[this.formname][this.selname].options[i] = this.selectArr[i];
  36. document.forms[this.formname][this.selname].options.length = this.selectArr.length;
  37. return;
  38. }
  39. function bldUpdate() {
  40. var str = document.forms[this.formname][this.textname].value.replace('^//s*','');
  41. if(str == '') {this.bldInitial();return;}
  42. this.initialize();
  43. var j = 0;
  44. pattern1 = new RegExp("^"+str,"i");
  45. for(var i=0;i<this.selectArr.length;i++)
  46. if(pattern1.test(this.selectArr[i].text)) 
  47. document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];
  48. document.forms[this.formname][this.selname].options.length = j;
  49. if(j==1){
  50. document.forms[this.formname][this.selname].options[0].selected = true;
  51. //document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
  52. }
  53. }
  54. function setUp() {
  55. obj1 = new SelObj('menuform','itemlist','entry');
  56. obj1.bldInitial(); 
  57. }
  58. // End -->
  59. </script>
  60. 第二步:把如下代码加入到<body>区域中
  61. <center>
  62. <form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">
  63. <font face="arial, helvetica" size="-1">键入a-d看看效果.</font> <br>
  64. <br>
  65. <input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
  66. <br>
  67. <select name="itemlist" size=5>
  68. <option value="page.html">ALL
  69. <option value="page.html">ALL CATALOG
  70. <option value="page.html">ALL CLUSTERS
  71. <option value="page.html">ALL CLUSTERS HASH EXPRESSIONS
  72. <option value="page.html">ALL COL COMMENTS
  73. <option value="page.html">ALL COL PRIVS
  74. <option value="page.html">ALL COL PRIVS MADE
  75. <option value="page.html">ALL COL PRIVS SENT
  76. <option value="page.html">ALL CONSTRAINTS
  77. <option value="page.html">ALL CONS COLUMNS
  78. <option value="page.html">ALL DB LINKS
  79. <option value="page.html">ALL DEF AUDIT
  80. <option value="page.html">ALL DEPENDENCIES
  81. <option value="page.html">ALL ERRORS
  82. <option value="page.html">ALL HISTOGRAMS
  83. <option value="page.html">ALL INDEXES
  84. <option value="page.html">ALL IND COLUMNS
  85. <option value="page.html">ALL JOBS
  86. <option value="page.html">ALL OBJECTS
  87. <option value="page.html">ALL REFRESH
  88. <option value="page.html">ALL REFRESH NOW
  89. <option value="page.html">ALL USERS
  90. <option value="page.html">ALL VIEWS
  91. <option value="page.html">AUDIT ACTIONS
  92. <option value="page.html">BOOKS
  93. <option value="page.html">CLIENTS
  94. <option value="page.html">CLOSED
  95. <option value="page.html">COLUMN PRIVILEGES
  96. <option value="page.html">DBA ANALYZE COST
  97. <option value="page.html">DBA FROM CLIENTS
  98. <option value="page.html">DBA FROM NEIGHBORS
  99. <option value="page.html">DBA PROFILES
  100. <option value="page.html">DBA REFRESH ALL
  101. <option value="page.html">DBA REFRESH PAGE
  102. <option value="page.html">DBA REPORT
  103. <option value="page.html">DBA RGROUP
  104. <option value="page.html">DBA ROLE
  105. <option value="page.html">DBA ROLE SUMMARY
  106. <option value="page.html">DBA ROLLBACK SEGS
  107. </select>
  108. </form>
  109. </center>
  110. 第三步:把“OnLoad="javascript:setUp()"”加在<body>标记里
  111. 例如:<body OnLoad="javascript:setUp()">

 

还没有测试 明天测试后 公布正确答案

你可能感兴趣的:(JavaScript,测试)