| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 648 人关注过本帖
标题:急!!有没有实现根据一列表框的选择来自动显示其他N个列表框的方法?
只看楼主 加入收藏
ykhpli
Rank: 1
等 级:新手上路
帖 子:17
专家分:0
注 册:2008-12-19
结帖率:50%
收藏
已结贴  问题点数:10 回复次数:4 
急!!有没有实现根据一列表框的选择来自动显示其他N个列表框的方法?
先多谢大家指教!
急求一实现方法:

一数字列表框,根据选择的数字出现N个列表框,比如选择4,那后面就出现4个列表框控件,前提是不刷新网页的情况下。

望各位大侠帮忙求解!谢谢

搜索更多相关主题的帖子: 列表 选择 
2010-04-19 14:13
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:10 
<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 编辑 ]
2010-04-19 15:53
ykhpli
Rank: 1
等 级:新手上路
帖 子:17
专家分:0
注 册:2008-12-19
收藏
得分:0 
感谢版主!!!!
还有一个问题,动态生成的这些列表框的选项值不是固定的,是从数据库里动态读取的,而且默认选定值也是从数据库里读取进行判断的。
js代码可以实现从数据库里读取数据吗?如何实现?谢谢
2010-04-19 18:19
yms123
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:209
帖 子:12488
专家分:19042
注 册:2004-7-17
收藏
得分:0 
也可以从数据库读取,不过要是不刷新的话就只有Ajax能实现了,但是写起来代码就要很麻烦了。
2010-04-19 18:28
阿笨猫
Rank: 1
等 级:新手上路
帖 子:4
专家分:5
注 册:2008-8-26
收藏
得分:0 
学习一下。
2010-04-20 09:54
快速回复:急!!有没有实现根据一列表框的选择来自动显示其他N个列表框的方法?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017246 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved