jasmine214--love

  1 [著者]zosatapo
  2 [联系]dertyang@ 263 .net
  3 [文章简单说明]本文提供在不刷新页面的前提下，动态生成select选项的
  4 目前比较主流的三种方案。并且提供简单效率测试，网页制作人员可以
  5 根据自己需要选择。
  6
  7 由于时间问题，我没有能写文章说明一下，但是我提供我写的全部代码。
  8 希望有兴趣的同行研究一下。
  9
 10 代码写的应该是很详细的。
 11
 12 <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
 13 < HTML >
 14 < HEAD >
 15 < TITLE >  New Document  </ TITLE >
 16 < META NAME = " Generator "  CONTENT = " EditPlus " >
 17 < META NAME = " Author "  CONTENT = "" >
 18 < META NAME = " Keywords "  CONTENT = "" >
 19 < META NAME = " Description "  CONTENT = "" >
 20 < style type = " text/css " >
 21 body {font - family:Courier New, Courier}
 22 select {font - size:8pt;font - family:Courier New, Courier}
 23 input {font - size:8pt;font - family:Courier New, Courier}
 24 </ style >
 25 < SCRIPT LANGUAGE = " JavaScript " >
 26 <!--
 27 var opttext =   new  Array( 1000 );
 28 var optvalue = new  Array( 1000 );
 29
 30 function change(object) {
 31 opt = object.options[object.selectedIndex];
 32 alert(opt.value + "  :  " + opt.text);
 33 }
 34 for (i = 0 ;i < opttext.length;i ++ )
 35 {
 36 opttext[i] = " zosatapo " + i;
 37 optvalue[i] = " name " + i;
 38 }
 39
 40 function option() {
 41 var opt;
 42 var start;
 43 var end;
 44
 45 start = new  Date();
 46 selContainer.innerHTML = "" ;
 47 selContainer.innerHTML = " <select id='selShow' onchange='change(this);'></select> " ;
 48
 49 for (i = 0 ;i < opttext.length;i ++ )
 50 {    opt = new  Option();
 51 // or you may code like below:
 52 // opt=document.createElement("OPTION");
 53 opt.text = opttext[i];
 54 opt.value = optvalue[i];
 55 selShow.options.add(opt);
 56 }
 57
 58 end = new  Date();
 59 optionTime.innerText = " The Operation Took Time: " + (end.getTime() - start.getTime()) + "  milliseconds " ;
 60
 61 }
 62
 63 function object()
 64 {
 65 var start;
 66 var end;
 67 var str = " <select id='selShow' onchange='change(this);'> " ;
 68
 69 start = new  Date();
 70 selContainer.innerHTML = "" ;
 71
 72 for (i = 0 ;i < opttext.length;i ++ )
 73 {
 74 str += " <option value=' " + optvalue[i] + " '> " + opttext[i] + " </option> " ;
 75 }
 76
 77 str += " </select> " ;
 78 selContainer.innerHTML = str;
 79
 80 end = new  Date();
 81 objectTime.innerText = " The Operation Took Time: " + (end.getTime() - start.getTime()) + "  milliseconds " ;
 82 }
 83
 84
 85 function join()
 86 {
 87 var len = opttext.length;
 88 var arr = new  Array(len);
 89 var start;
 90 var end;
 91
 92 start = new  Date();
 93 selContainer.innerHTML = "" ;
 94 joinTime.innerText = "" ;
 95
 96 for (i = 0 ;i < len;i ++ )
 97 {
 98 arr[i] = " <option value=' " + optvalue[i] + " '> " + opttext[i] + " </option> " ;
 99 }
100 selContainer.innerHTML = " <select id='selShow' onchange='change(this);'> " + arr.join() + " </select> " ;
101
102 end = new  Date();
103 joinTime.innerText = " The Operation Took Time: " + (end.getTime() - start.getTime()) + "  milliseconds " ;
104 }
105 // -->
106 </ SCRIPT >
107 </ HEAD >
108
109 < BODY BGCOLOR = " #FFFFFF " >
110 < p align = center >< B >< FONT SIZE = 4 > 动态生成SELECT选项演示大全 </ FONT ></ B ></ p >
111
112 Method I: < font color = blue >  options.add() </ font >< br >
113 < Input type = " Button "  value = " New Option "  onclick = " option(); " >
114 < span id = " optionTime " > test </ span >< br >< BR >
115
116 Method I: < font color = blue > object.innerHTML </ font >< br >
117 < Input type = " Button "  value = " Object InnerHTML "  onclick = " object(); " >
118 < span id = " objectTime " > test </ span >< br >< BR >
119
120 Method I: < font color = blue > object.innerHTML  &  Array.join() </ font >< br >
121 < Input type = " Button "  value = " Array Join "  onclick = " join(); " >
122 < span id = " joinTime " >< a href = # > test </ a ></ span >< br >< BR >
123
124 < font color = blue > 演示效果预览区域： </ font >< br >< br >
125 < span id = " selContainer " >
126 < select id = " selShow " >< option  > Empty </ option ></ select >
127 </ span >
128 </ BODY >
129 </ HTML >