当前位置：首页 → 问答吧 → 一个表单下拉列表的问题？

一个表单下拉列表的问题？

时间：2010-05-20

来源：互联网

就是一个下拉列表里的选择其他选项后面出现一个文本框输入值这个该怎么做

最近需要做个有很多联动下拉列表的表单  哪位大哥有能在一个表单里重复使用多次的无限级下拉列表
我现在用的联动下拉列表是这个http://bbs.blueidea.com/thread-2285998-1-1.html  不过要重复使用的话得把JS重新复制更改一遍有没有更简洁一点
另外我这个联动下拉列表是读数据库里的信息  用哪种方式做比较好 JS的还是AJAX的后台是JSP的

作者: AyumiHamasaki 发布时间: 2010-05-20

吃过饭又自己研究了一下选择其他时后面出现文本框传递值效果是做出来了总感觉自己做的有点复杂了哪位有更简洁的这样做法对不对以前很少做表单

复制内容到剪贴板

代码:

[ 本帖最后由 AyumiHamasaki 于 2010-5-20 18:36 编辑 ]

作者: AyumiHamasaki 发布时间: 2010-05-20

帮忙顶一下...

作者: hehe8812345 发布时间: 2010-05-20

第一个问题自己解决了
那么这种三级以上的联动下拉列表从数据库里读数据 JS和AJAX哪种方式比较简洁？

作者: AyumiHamasaki 发布时间: 2010-05-21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> #show{margin-top:20px;font: 12px/1.5 arial;color:#FF0080;} </style> </head> <body> <div id="wrap"></div> <div id="show"></div> <script type="text/javascript"> //<![CDATA[ var data=[{t:'猪',s:[{t:'白',s:[{t:'瘦肉型'}]},{t:'黑'},{t:'杂'}]},{t:'鸡',s:[{t:'土鸡'},{t:'良种鸡',s:[{t:'北美',s:[{t:'黑色'}]},{t:'日本'}]}]},{t:'鸭',s:[{t:'本地'},{t:'进口',s:[{t:'巨型'}]}]},{t:'鹅',s:[{t:'普通'},{t:'品牌'}]},{t:'鸽子',s:[{t:'信鸽'},{t:'肉鸽'}]},{t:'鹌鹑'},{t:'牛'},{t:'羊'},{t:'其他'}]; function listChain(wrap,json,title,sub){ this.wrap=typeof wrap=="string"?document.getElementById(wrap):wrap; this.data=json; if(title)this.title=title; if(sub)this.sub=sub; this.value=this.create(this.data) }; listChain.prototype={ title:'t', sub:'s', group:[], create:function (json){ var path=[],_listChain=this,sel=document.createElement('SELECT'); this.group.push(sel); this.wrap.appendChild(sel); sel.onchange=function (){_listChain._change(this)}; for(var i=0,l=json.length;i<l;i++) sel.options.add(new Option(json[i][this.title],i,0,0)); path.push(json[0][this.title]); if(json[0][this.sub]) path.push(this.create(json[0][this.sub])); return path }, _change:function (sel){ var g=this.group,data=this.data; this.value=[]; for(var i=0,l=g.length;i<l;i++){ this.value.push(data[g[i].value][this.title]); data=data[g[i].value][this.sub]; if(g[i]==sel)break }; for(i++;i<l;i++){ if(data){ g[i].innerHTML=''; g[i].style.display=''; for(var j=0,n=data.length;j<n;j++) g[i].options.add(new Option(data[j][this.title],j,0,0)); this.value.push(data[0][this.title]); data=data[0][this.sub] }else{ g[i].style.display='none' } }; data&&this.value.push(this.create(data)); this.onchange(this.value) }, onchange:function (vals){} }; var lc=new listChain('wrap',data); lc.onchange=function (x){ document.getElementById('show').innerHTML=x } //]]> </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: kfguoguo 发布时间: 2010-05-21

挺简洁的就是不太灵活全写到一个DIV里了研究一下

作者: AyumiHamasaki 发布时间: 2010-05-22