Javscript operation select tag [dynamic addition, clear]

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
< Title > Untitled document </ Title >
< Script Type = "Text/JavaScript" >
Function Addlist () {
VaR List = Document. getelementbyid ( " List " );
For ( VaR I =   1 ; I <=   5 ; I ++ ) {
VaR Newoption = Document. createelement ( " Option " );
Newoption. setattribute ( " Value " , I );
Newoption. appendchild (document. createtextnode ( " Test Data "   + I ));
List. appendchild (newoption );
}
}

Function Clearlist () {
VaR List = Document. getelementbyid ( " List " );

For ( VaR I = List. Options. length; I > =   0 ; I -- ) {
List. Remove (I );
}
// Note: each time you delete an option, the index feature of other options will be automatically reset. Therefore, you can follow the method below (that is, you cannot delete the index from top to bottom)
// For (VAR I = 0; I <list. Options. length; I ++ ){
// List. Remove (I );
// }
}
</ Script >
</ Head >
< Body >
< Select Name = "List" ID = "List" >
</ Select >
< Input Type = "Button" Onclick = "Addlist ()" Value = "Generate" />
< Input Type = "Button" Onblur = "Clearlist ()" Value = "Clear"   />
</ Body >
</ Html >