|
#2
yms1232010-04-19 15:53
<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 编辑 ] |
先多谢大家指教！
急求一实现方法：
一数字列表框，根据选择的数字出现N个列表框，比如选择4，那后面就出现4个列表框控件，前提是不刷新网页的情况下。
望各位大侠帮忙求解！谢谢