<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>【 动态添加下拉框选项】----【欢迎光临阿信的站点】 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="fason,阿信">
<meta name="Keywords" content="fason,阿信,dhtml,select,option,添加">
<meta name="Description" content="用dhtml动态添加下拉框选项">
<style type="text/css">
<!--
body {
margin:0;
}
body,td,span {
font:12px Arial, Verdana;
color: #000000;
}
.test {
width:100px;
}
-->
</style>
<script language="JavaScript">
<!--
function addOption1() {
var d = new Date();
var s = document.getElementById("select1");
for(var i=0;i<1000;i++) {
var tmp = document.createElement("option");
tmp.value = tmp.text = "fason阿信";
s.options.add(tmp);
}
document.getElementById("description1").innerHTML = "总共用了" + (new Date() - d) + "ms";
}function addOption2() {
var d = new Date();
var s = document.getElementById("select2");
for(var i=0;i<1000;i++) {
s.options[s.length] = new Option("fason阿信","fason阿信");
}
document.getElementById("description2").innerHTML = "总共用了" + (new Date() - d) + "ms";
};function addOption3() {
var d = new Date();
var s = document.getElementById("select3");
var html = s.parentNode.innerHTML.match(/(^<.*select[^>]*>)/)[0];
var arr = [];
for(var i=0;i<1000;i++) {
arr[arr.length] = "<option text=\"fason阿信\">fason阿信</option>";
}
html += arr.join("") + "</select>";
s.parentNode.innerHTML = html;
document.getElementById("description3").innerHTML = "总共用了" + (new Date() - d) + "ms";
}//-->
</script>
</head>
<body>
<div align="center">
<table border="0" width="778" cellpadding=0 cellspacing=0>
<tr>
<td style="padding:10px">
<p> </p>
<h4>【 动态添加下拉框选项的多种方法】</h4>
<hr>
<p>动态添加下拉框选项的方法很多，这里先介绍几种方法并比较一下添加的效果。</p>
<p>1.用DOM来添加</p>
<div>
<select id="select1" class="test" onchange="alert(value)"></select>
<input type=button value="添加行测试" onclick="addOption1()">
<span id="description1"></span>
</div> <p>2.另一种常用方法</p>
<div>
<select id="select2" class="test"></select>
<input type=button value="添加行测试" onclick="addOption2()">
<span id="description2"></span>
</div>
<p>3.用HTML(快速添加方法)</p>
<div>
<span><select id="select3" class="test"></select></span>
<input type=button value="添加行测试" onclick="addOption3()">
<span id="description3"></span>
</div>
<p>综以上几种方法的比较，效率相差还是比较大的，但各有各的好处和特点，尽管在应用中挑选合适自己的方法！</p>
<center>
<font color=red size=2>欢迎光临！</font><br>
<font size=2>你是第<img src=http://counter.nease.net/cgi-bin/count.cgi?fason:34>位来访者！</font>
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<title>【 动态添加下拉框选项】----【欢迎光临阿信的站点】 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="fason,阿信">
<meta name="Keywords" content="fason,阿信,dhtml,select,option,添加">
<meta name="Description" content="用dhtml动态添加下拉框选项">
<style type="text/css">
<!--
body {
margin:0;
}
body,td,span {
font:12px Arial, Verdana;
color: #000000;
}
.test {
width:100px;
}
-->
</style>
<script language="JavaScript">
<!--
function addOption1() {
var d = new Date();
var s = document.getElementById("select1");
for(var i=0;i<1000;i++) {
var tmp = document.createElement("option");
tmp.value = tmp.text = "fason阿信";
s.options.add(tmp);
}
document.getElementById("description1").innerHTML = "总共用了" + (new Date() - d) + "ms";
}function addOption2() {
var d = new Date();
var s = document.getElementById("select2");
for(var i=0;i<1000;i++) {
s.options[s.length] = new Option("fason阿信","fason阿信");
}
document.getElementById("description2").innerHTML = "总共用了" + (new Date() - d) + "ms";
};function addOption3() {
var d = new Date();
var s = document.getElementById("select3");
var html = s.parentNode.innerHTML.match(/(^<.*select[^>]*>)/)[0];
var arr = [];
for(var i=0;i<1000;i++) {
arr[arr.length] = "<option text=\"fason阿信\">fason阿信</option>";
}
html += arr.join("") + "</select>";
s.parentNode.innerHTML = html;
document.getElementById("description3").innerHTML = "总共用了" + (new Date() - d) + "ms";
}//-->
</script>
</head>
<body>
<div align="center">
<table border="0" width="778" cellpadding=0 cellspacing=0>
<tr>
<td style="padding:10px">
<p> </p>
<h4>【 动态添加下拉框选项的多种方法】</h4>
<hr>
<p>动态添加下拉框选项的方法很多，这里先介绍几种方法并比较一下添加的效果。</p>
<p>1.用DOM来添加</p>
<div>
<select id="select1" class="test" onchange="alert(value)"></select>
<input type=button value="添加行测试" onclick="addOption1()">
<span id="description1"></span>
</div> <p>2.另一种常用方法</p>
<div>
<select id="select2" class="test"></select>
<input type=button value="添加行测试" onclick="addOption2()">
<span id="description2"></span>
</div>
<p>3.用HTML(快速添加方法)</p>
<div>
<span><select id="select3" class="test"></select></span>
<input type=button value="添加行测试" onclick="addOption3()">
<span id="description3"></span>
</div>
<p>综以上几种方法的比较，效率相差还是比较大的，但各有各的好处和特点，尽管在应用中挑选合适自己的方法！</p>
<center>
<font color=red size=2>欢迎光临！</font><br>
<font size=2>你是第<img src=http://counter.nease.net/cgi-bin/count.cgi?fason:34>位来访者！</font>
</center>
</td>
</tr>
</table>
</div>
</body>
</html>
"document.MainForm.position.options[a]=***;",才能将***付值给该表单元素。如果你想像你那么写你必须先"MainForm = document.MainForm;"。