<html>
<head>
<title>生成列表框(DOM方法)</title>
<script language="javascript">
var rootOptionCount=10;//最开始下拉列表框的个数
var rootSel;//最开始的列表框
//页面加载事件
function Page_Load()
{
var rootListNum=prompt("请输入想要生成几个列表框\n[不输入默认是10]","10");
if(rootListNum!="")
{
if(!isNum(rootListNum))
{
alert('输入的不是数字\n程序自动结束,请刷新网页再试');
return false;
}
if(parseInt(rootListNum)>999)
{
alert('最多999\n程序自动结束,请刷新网页再试');
return false;
}
rootOptionCount=parseInt(rootListNum);
}
InitRootSelect();//根列表框初始化事件
document.body.appendChild(rootSel);//将根列表加入到网页中
}
function isNum(Val)
{
try
{
var test=parseInt(Val);
return true;
}
catch(e)
{
return false;
}
}
function InitRootSelect()
{
//创建一个列表框并设置其id为rootSel
rootSel=document.createElement("select");
rootSel.setAttribute("id","rootSel");
//为创建的列表框添加选择事件(区别IE与其他浏览器)
if(window.attachEvent)
rootSel.attachEvent("onchange",rootSel_Change);
else
rootSel.addEventListener("change",rootSel_Change,false);
//生成根列表框的一个选项
var rootOption=getOption("","请选择要生成的下拉列表数量");//获得选项
rootSel.appendChild(rootOption); //将选项添加到列表框
MarkRootSelect();//生成列表框所有选项
}
//循环生成列表框
function MarkRootSelect()
{
for(var i=0;i<rootOptionCount;i++)
{
var rootOption=getOption(i,"我要生成"+i+"个列表框");
rootSel.appendChild(rootOption);
}
}
//生成选项函数
//参数val选项的值
//参数txt选项的文本
function getOption(val,txt)
{
var selOption=document.createElement("option");//创建一个选项
var selText=document.createTextNode(txt);//创建一个选项的文本
selOption.value=val;//设置选项的值
selOption.appendChild(selText);//添加文本到选项
return selOption;//返回选项
}
//根下拉列表选项选择事件
function rootSel_Change()
{
rootSel=document.getElementById("rootSel");//根据id定位到根下拉列表
var selIndex=rootSel.selectedIndex;//获得选中的是第几项
var selValue=rootSel.options[selIndex].value;//获得选中项的值[options]下拉列表选项集合
MarkCycleSelect(parseInt(selValue));//调用函数循环生成下拉列表
}
//循环生成下拉列表
//参数selCount下拉列表的个数
function MarkCycleSelect(selCount)
{
var selList=document.body.childNodes;//获得当前网页的所有下拉列表
//防止重复生成的判断,如果重复
if(selList.length!=1)
RemoveSelect();//清除重复生成的下拉列表
for(var i=0;i<selCount;i++)
{
var selItem=getSelectElement();//创建一个下拉列表
var selItemOption=getOption(i,"这是第"+i+"个列表框");//创建一个选项
selItem.appendChild(selItemOption);//将选项追加到创建的下拉列表里
var br=document.createElement("br");//创建一个换行
document.body.appendChild(br);//将创建的换行追加到网页
document.body.appendChild(selItem);//将创建的下拉列表追加到网页
}
}
//循环删除重复生成的下拉列表
function RemoveSelect()
{
var selList=document.body.childNodes;
for(var i=selList.length-1;i>=1;i--)//倒循环下拉列表总数
document.body.removeChild(selList[i]);//从网页删除一个下拉列表
}
//创建下拉列表对象
function getSelectElement()
{
var selElement=document.createElement("select");
return selElement;
}
</script>
</head>
<body onLoad="Page_Load();">
</body>
</html>
[
本帖最后由 yms123 于 2010-4-19 16:14 编辑 ]