怎么实现动态的创建下拉列表框呢？求解
日期：2014-05-20 浏览次数：20735 次
如何实现动态的创建下拉列表框呢？求解
我的问题是这样的，我再详细的说下哦，首先我通过一个方法拿到了
<argument>
<item> <name>南京网 </name> <url>www.nanjing.com </url> <selectname>1 </selectname> </item>
<item> <name>上海网 </name> <url>www.shanghai.com </url> <selectname>2 </selectname> </item>
<item> <name>北京网 </name> <url>www.baijing.com </url> <selectname>1 </selectname> </item>
<item> <name>徐汇网 </name> <url>www.shangha.com </url> <selectname>3 </selectname> </item>
</argument>
上面这样的一段东东,然后需要动态的生成下拉列表框;现在我已经分别得到了name,url,selectname的值,name是下拉列表框的选项(也就是option的值了),url是选择某个option后对应打开的连接地址,后面的selectname是下拉列表框的类型,也就是哪些option该放在哪个select里,象上面的(南京网和北京网这2个option应该在1这同一个下拉框里),(上海网则是在叫2的这个下拉列表框里;徐汇网则是在叫3的这个下拉列表框里),需求基本就是这样的
现在就是想通过循环遍历selectname来判断 对吧,是相同的就放在同一个select里,不同的就建个新的select,这样根据上面贴的代码就会达到这样的效果::::有3个下拉列表框(分别是1,2,3这3个下拉列表框,然后南京网和北京网这2个name会作为option显示在1下拉框里,上海网作为option显示在2下拉框里,徐汇网作为option显示在3下拉框里),这样的,不知道说的是否清楚了,还望大家帮帮我看看,给我个明确的解决答案,谢谢大家了!!!
我再把我的问题说下 别 说我烦哦 真的很急 高手大哥们快来帮我看看啊
------解决方案--------------------
最简单的方法
把你要实现的内容 用html源代码组装好,
然后 document.XX.innerHTML=""
------解决方案--------------------
------解决方案--------------------
用Ajax的DWR框架
不清楚是动态创建 <select> 还是创建select的 <option>
给一个看看：
<head>
<script src= "dwr/interface/JUser.js "> </script>
<script src= "dwr/engine.js "> </script>
<script src= "dwr/util.js "> </script>
<script type= "text/javascript ">
function sload(){
JUser.getData(id,getsls);//调用JUser业务类的获取将填充 <select> 的返回值为List的方法
}
function getsls(data){
document.form1.firs.options.length=0;
document.form1.secs.options.length=0;
document.form1.ths.options.length=0;
//如果是动态的就创建若干个
//var oSel = document.createElement( "SELECT ");
//oSel.id= "firs ";
//.....
for(var i=0;i <data.length;i++){
//创建多个Option
var option1=new Option(data[i].name,data[i].url);
if(data[i].selectName==1)
document.form1.firs.options.add(option1);
else if(data[i].selectName==2)
document.form1.secs.options.add(option1);
else if(data[i].selectName==3)
document.form1.ths.options.add(option1);
}
}
function getfAction(aurl){
document.forms[0].action= "// "+aurl.value;
document.forms[0].submit();
}
</script>
</head>
<body onload= "sload() ">
<form name= "form1 ">
1: <select id= "firs " onchange= "getfAction(this) ">
</select>
2: <select id= "secs " onchange= "getfAction(this) ">
</select>
3: <select id= "ths " onchange= "getfAction(this) ">
</select>
</form>
</body>
我的问题是这样的，我再详细的说下哦，首先我通过一个方法拿到了
<argument>
<item> <name>南京网 </name> <url>www.nanjing.com </url> <selectname>1 </selectname> </item>
<item> <name>上海网 </name> <url>www.shanghai.com </url> <selectname>2 </selectname> </item>
<item> <name>北京网 </name> <url>www.baijing.com </url> <selectname>1 </selectname> </item>
<item> <name>徐汇网 </name> <url>www.shangha.com </url> <selectname>3 </selectname> </item>
</argument>
上面这样的一段东东,然后需要动态的生成下拉列表框;现在我已经分别得到了name,url,selectname的值,name是下拉列表框的选项(也就是option的值了),url是选择某个option后对应打开的连接地址,后面的selectname是下拉列表框的类型,也就是哪些option该放在哪个select里,象上面的(南京网和北京网这2个option应该在1这同一个下拉框里),(上海网则是在叫2的这个下拉列表框里;徐汇网则是在叫3的这个下拉列表框里),需求基本就是这样的
现在就是想通过循环遍历selectname来判断 对吧,是相同的就放在同一个select里,不同的就建个新的select,这样根据上面贴的代码就会达到这样的效果::::有3个下拉列表框(分别是1,2,3这3个下拉列表框,然后南京网和北京网这2个name会作为option显示在1下拉框里,上海网作为option显示在2下拉框里,徐汇网作为option显示在3下拉框里),这样的,不知道说的是否清楚了,还望大家帮帮我看看,给我个明确的解决答案,谢谢大家了!!!
我再把我的问题说下 别 说我烦哦 真的很急 高手大哥们快来帮我看看啊
------解决方案--------------------
最简单的方法
把你要实现的内容 用html源代码组装好,
然后 document.XX.innerHTML=""
------解决方案--------------------
------解决方案--------------------
用Ajax的DWR框架
不清楚是动态创建 <select> 还是创建select的 <option>
给一个看看：
<head>
<script src= "dwr/interface/JUser.js "> </script>
<script src= "dwr/engine.js "> </script>
<script src= "dwr/util.js "> </script>
<script type= "text/javascript ">
function sload(){
JUser.getData(id,getsls);//调用JUser业务类的获取将填充 <select> 的返回值为List的方法
}
function getsls(data){
document.form1.firs.options.length=0;
document.form1.secs.options.length=0;
document.form1.ths.options.length=0;
//如果是动态的就创建若干个
//var oSel = document.createElement( "SELECT ");
//oSel.id= "firs ";
//.....
for(var i=0;i <data.length;i++){
//创建多个Option
var option1=new Option(data[i].name,data[i].url);
if(data[i].selectName==1)
document.form1.firs.options.add(option1);
else if(data[i].selectName==2)
document.form1.secs.options.add(option1);
else if(data[i].selectName==3)
document.form1.ths.options.add(option1);
}
}
function getfAction(aurl){
document.forms[0].action= "// "+aurl.value;
document.forms[0].submit();
}
</script>
</head>
<body onload= "sload() ">
<form name= "form1 ">
1: <select id= "firs " onchange= "getfAction(this) ">
</select>
2: <select id= "secs " onchange= "getfAction(this) ">
</select>
3: <select id= "ths " onchange= "getfAction(this) ">
</select>
</form>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
