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 >