(100)高分赠英雄，求助!!关于下拉表单的问题。很急，麻烦各位高手帮帮忙!!!!

小弟做了一个下拉表单。表单的内容(单位名称)是从数据库里读出来的。由于单位名称非常多了，有100多个。所以用普通方法找起来非常不方便。所以看能不能实现以下功能：
1、表单值既可以手工输入也可以在下拉表单里选取。
2、表单带筛选功能。根据我的输入进行筛选。如：当我在框里输入“啤酒”的时候，下拉表单里有关“啤酒”的单位就显示出来。

不知道我问题说清楚没？非常急哈，请各位高手帮帮忙。在线等。我的QQ是：21215036。

28 个解决方案

#1

有分类吗？

如果有可以这样

http://www.51windows.net/hw/asp/jsview.asp?id=337

或者这个
http://www.51windows.net/hw/asp/jsview.asp?id=318

都不行，可以在从数据库读取时分类

#2

<%
<SCRIPT LANGUAGE="JavaScript" src="dbselect.asp?s_v=1"></SCRIPT>
dim db_id,db_pid,db_text,db_table,select_name,select_value,dbpath
db_id = "id" '主id
db_pid = "pid" '父ID
db_text = "name" '名
db_table = "Folder" '表名
select_name = "Folder" '下拉菜单名
select_value = trim(request("s_v")) '值
dbpath = "mdb.asp" '数据库名
set conn=Server.CreateObject("ADODB.Connection")
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Jet OLEDB:Database Password=;Data Source="&Server.MapPath(dbpath)
set rs=Server.CreateObject("ADODB.Recordset")
%>

var select_value = "<% = select_value %>"
function TreeView(obj,target){
this.obj=obj;
this.root=new node(0);
this.nodes=[]
this.currentNode=null;
this.html=""
this.config={

blank :'┣━',
line :'┣━'
}
for(i in this.config){var tem=this.config[i];this.config[i]=new Image();this.config[i].txt=tem}
}

function node(id,pid,txt){
this.id=id
this.pid=pid
this.txt=txt
this.indent=""
this.open=false;
this.lastNode=false;
this.hasNode=false
}

TreeView.prototype.add=function(id,pid,txt){
var itemTxt=txt?txt:"New Item"
this.nodes[this.nodes.length]=new node(id,pid,itemTxt)
}

TreeView.prototype.DrawTree=function(pNode){
var str=""
for(var i=0;i<this.nodes.length;i++){
if(this.nodes[i].pid==pNode.id){
str+=this.DrawNode(this.nodes[i].id,i)
}
}
return str
}

TreeView.prototype.ChkPro=function(pNode){
var last;
for(var n=0;n<this.nodes.length;n++){
if(this.nodes[n].pid==pNode.id)pNode.hasNode=true;
if (this.nodes[n].pid == pNode.pid) last= this.nodes[n].id;
}
if (last==pNode.id) pNode.lastNode = true;
}

TreeView.prototype.DrawNode=function(id,nid){
var str=""
var select_ed = ""
var nNode=this.nodes[nid]
this.DrawLine(nNode,nNode)
if(nNode.hasNode)
nNode.indent+=(nNode.hasNode?"":"")
if (select_value==id){select_ed = "selected"}else{select_ed = "";}
str+="<option value="+id+" "+select_ed+">"+nNode.indent+this.DrawLink(nid)+"</option>"
if(nNode.hasNode){
str+=this.DrawTree(nNode)
}
return str;
}

TreeView.prototype.DrawLine=function(nNode,tem){
for(var i=1;i<this.nodes.length;i++){
if(this.nodes[i].id==tem.pid){
nNode.indent=(this.nodes[i].lastNode?this.config.blank.txt:this.config.line.txt)+nNode.indent
this.DrawLine(nNode,this.nodes[i])
}
}
}
TreeView.prototype.DrawLink=function(nid){
var nNode=this.nodes[nid]
return nNode.txt
}

TreeView.prototype.toString=function(){
var str=""
for(var i=0;i<this.nodes.length;i++)this.ChkPro(this.nodes[i])
str+=this.DrawTree(this.root)
return str
}

var a=new TreeView('a','main')
<%
dim select_sql
select_sql = "Select " & db_id & "," & db_pid & "," & db_text & " from [" & db_table & "]"
Set rs = Conn.Execute(select_sql)
While rs.EOF =flase
Thisid=rs(db_id)
%>
a.add(<%=rs(db_id)%>,<%=rs(db_pid)%>,'<%=rs(db_text)%>');<%
rs.MoveNext
Wend
rs.close
Set rs=nothing
conn.close
Set conn=nothing
%>
document.write("<select name='<% = select_name %>'>"+a+"</select>");

#3

<html>

<head>
<style>
a{color:red;text-decoration:none;font-size:12px}
</style>
</head>

<script language="JavaScript">

</script>

<body onload="Init()" bgcolor="#3366cc">
<center>
<h2>动态提示的下拉框</h2>
<hr>
<form name=frm>
<table>
  <tr>
    <td><input name="txt" style="width:100px" onkeyup="SelectTip(0)"> <input type="button" value="reset" onclick="SelectTip(1)"></td>
  </tr>
  <tr>
    <td>
    <span id="demo"><select name="demo" style="width:100px" size=10 onchange="txt.value=options[selectedIndex].text;"></select></span>
    </td>
  </tr>
</form>
</table>
<hr>
<script language="javascript">

for(i=0;i<100;i++)
document.frm.demo.options[document.frm.demo.length]=new Option(String(Math.random()).substr(2,8))

var TempArr=[];

function Init(){
var SelectObj=document.frm.elements["demo"]
with(SelectObj)
for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]
}

function SelectTip(flag){
var TxtObj=document.frm.elements["txt"]
var SelectObj=document.getElementById("demo")
var Arr=[]
with(SelectObj){
var SelectHTML=innerHTML.match(/<[^>]*>/)[0]
for(i=0;i<TempArr.length;i++)
if(TempArr[i][0].indexOf(TxtObj.value)==0||flag) Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>"
innerHTML=SelectHTML+Arr.join()+"</SELECT>"
}
}
</script>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand;z-index:100000;font:menu;">
<A href="http://www.51windows.Net/?js" target=_blank><FONT color=red> My Js Collection!</FONT></A><br><input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'><SCRIPT LANGUAGE="JavaScript" src="/log/sitelog.asp"></SCRIPT></div>

#4

你的意思是不是象chm帮助文件里的检索功能？然后还允许在下拉框中输入信息？

#5

to 海娃|bananasmiling(hello找我)：
就是要实现：http://www.51windows.net/hw/asp/jsview.asp?id=318这种效果
但是还是有个问题。我的数据是从库里读出来的。我不知道怎样修改这个程序，能否帮忙。

#6

可输入的下拉菜单：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Author" content="阿信,fason">
<meta name="KeyWords" content="下拉框,输入,阿信,fason">
<title>漂亮下拉框</title>
<style>
.selectBox{border:1px solid #993300;height:20px;}
.editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
.dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
.selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
.selectContent tr{height:20px;cursor:default}
.selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
.OnFocus{color:#FFFFFF;background-color:#993300}
</style>
<script language="javascript">
var CoolSelect=[]
var CurrentTR=null
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
CurrentTR=trObj;
}

function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#cc3300'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#993300'
}
function MouseClick(Index,trObj){
with(GetObj(CoolSelect[Index][1])){
value=trObj.innerText;
style.backgroundColor='#993300'
style.color='#FFFFFF'
focus()
}
DropDown(Index)
}
function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}
function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}
function DropDown(Index){
event.cancelBubble=true
ContainerReset(Index)
var show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'
GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'
setPosition(Index)
}
function document::onclick(){
for(i=0;i<CoolSelect.length;i++){
GetObj(CoolSelect[i][2]).style.visibility='hidden'
with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
}
}
function window::onresize(){
for(i=0;i<CoolSelect.length;i++)setPosition(i)
}

function showTip(Index){
var inputbox=GetObj(CoolSelect[Index][1])
var container=GetObj(CoolSelect[Index][2])
var num=0
container.style.visibility="visible"
for(i=0;i<container.rows.length;i++){
if(container.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)container.rows[i].style.display="none"
else {container.rows[i].style.display="";num++}
}
if(num==0)container.style.visibility='hidden'
}
function ContainerReset(Index){
var container=GetObj(CoolSelect[Index][2])
for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""
if(CurrentTR)CurrentTR.className=""
}
function setPosition(Index){
var s=GetObj(CoolSelect[Index][0])
var container=GetObj(CoolSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;
while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(container.style){left=l+1;top=t+GetObj(CoolSelect[Index][0]).offsetHeight}
}
function Init(){
CoolSelect[0]=["ConTainer1","txt1","select1"]
CoolSelect[1]=["ConTainer2","txt2","select2"]
for(i=0;i<CoolSelect.length;i++){
var s=GetObj(CoolSelect[i][0])
var container=GetObj(CoolSelect[i][2])
container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth
setPosition(i)
}
}
function GetObj(id){return document.getElementById(id)}
</script>
</head>
<body onload="Init()">
<div align="center">
<table style="width:250;border:2px solid groove;font-size:12px" border=1 cellspacing=0 cellpadding=0>
<tr bgcolor="green" style="font-weight:bold;color:#FFFFFF">
<td>输入，提示功能示例</td><td>菜单跳转示例</td>
</tr>
  <tr>
    <td>
<table id="Container1" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>
  <tr>
    <td><input name="txt1" value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(0)" onkeyup="showTip(0)"></td>
    <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(0)">6</span></td>
  </tr>
</table>
    </td>
    <td>
<table id="Container2" class="selectBox" border="0" cellspacing=0 cellpadding=0>
  <tr>
    <td><input name="txt2" readOnly=true value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(1)" onkeyup="showTip(1)"></td>
    <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(1)">6</span></td>
  </tr>
</table>
    </td>
  </tr>
</table>
</div>
<table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
    <td>一起走过的日子</td>
  </tr>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
    <td>你是我的温柔</td>
  </tr>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
    <td>你是我的女人</td>
  </tr>
</table>
<table id="select2" class="selectContent" cellspacing=0 cellpadding=0>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://expert.****.net/expert/forum.asp">
    <td>****论坛</td>
  </tr>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://msdn.microsoft.com/library/">
    <td>MSDN参考</td>
  </tr>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://www.iecn.net">
    <td>IECN论坛</td>
  </tr>
</table>
</body>
</html>

#7

海娃的下拉菜单从数据库里面调出来的代码，我只是改了一部分，剩下的你自己改吧：

表：PART_MANAGE
结构：
    part_id         parent_id      part_name
       ID             父节点          名称


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="haiwa">
<title>树型下拉框菜单</title>
<style>

</style>
</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

#8

<html>
<head>
<title>j?</title>

</head>
<body onLoad="ld()">
<%set conn=server.CreateObject("adodb.connection")
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.MapPath("online.mdb")
set rs=server.CreateObject("adodb.recordset")
sq="select * from sheng"
rs.open sq,conn,1,1%>
<form  name="myform"  method="post">
<select  name="bi"  onChange="ld()">
<%while not rs.eof%>
<option value="<%=rs("name")%>"><%=rs("name")%></option>
<%rs.movenext
wend
rs.close%>
</select>
<select  name="sm">
</select>
<%sql="select * from shi"
rs.open sql,conn,1,1
num=rs.recordcount
str=""
for i=1 to rs.recordcount
str=str&rs("sheng")&"-"&rs("name")&","
if rs.eof then exit for
rs.movenext
next
rs.close
conn.close
set rs=nothing
set conn=nothing
%>
<script  LANGUAGE="javascript">
arr="<%=str%>".split(",");
a=arr.length
ar=new Array()
for (i=0;i<a;i++){
  ar[i]=arr[i].split("-");
}
onecount=ar.length;

function  ld() {
  document.myform.sm.length=0
  lid=myform.bi.value;
  for  (i=0;i<onecount;i++)  {
    if  (ar[i][0]  ==  lid) {
  document.myform.sm.options.add(new Option(ar[i][1],  ar[i][1]));
    }
  }
}
</script>
</form>
</body>
</html>

#9

To lawdoor(风语者) :

你好，你的代码不是以表单形式提交吗？

#10

我的数据库：
表sheng(记录省）
id          name
自动编号   文本（记录省名）

表shi(记录市）
id           sheng            name
自动编号   文本（所在省名）  文本（市名）

#11

是呀，在body后加各form就行呀,而且
<form name="form" method="post" action="aaa.asp">
<SCRIPT LANGUAGE="JavaScript">
..........
...............
document.write("<select name='part_id'>"+a+"</select>");
//-->
</SCRIPT>
</form>

#12

To:lawdoor(风语者)

我要的效果是你发的“阿信”那个代码的效果。但是那个代码不是表单的形式呀。

#13

这个啦
<html>
<head>
<meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">
<title>可输入的select</title>
<style>
.optionForSel  {font-size:9pt}
</style>
</head>

<body    leftmargin="50"  topmargin="50">

<table  cellpadding="0"  cellspacing="0"  border="0"  width="300">
           <tr>
                       <td  id="selectLength"  width="100%"  style="height:20px;padding:0px;border:2px  inset  #404040;border-right:0px;border-bottom:1px  solid  #D4D0C8;font-size:9pt;">
                                   <div  id="selectedValue"  style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
                       </td>
                       <td  width="20"  style="height:20px;padding:0px;border-top:2px  inset  #404040;border-left:0px;border-right:1px  solid  #D4D0C8;border-bottom:1px  solid  #D4D0C8;font-size:9pt">
                                   <img  src="images/button2.gif"  border="0"  id="mm"  onclick="mm_Click()"  align="absmiddle"  width="18"  height="18">
                       </td>
           </tr>
</table>
<div  id="dropdownOption"  style="position:absolute;visibility:hidden;width:100%;border:1px  solid  #080808;z-index:10">
           <table  width="100%"  cellpadding="0"  cellspacing="1"  class="optionForSel"  bgcolor="White">
                       <tr>
                                   <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">
                                               Visit1
                                   </td>
                       </tr>
                       <tr>
                                   <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">
                                               Visit2
                                   </td>
                       </tr>
                       <tr>
                                   <td  onmouseover="this.style.backgroundColor='#0099ff'"  onmouseout="this.style.backgroundColor=''"  onclick="document.all.selectedValue.innerText=this.innerText">
                                               Visit3
                                   </td>
                       </tr>
           </table>
</div>

<script>
function  mm_Click(){
           if  (document.all.dropdownOption.style.visibility  ==  'visible')
                       document.all.dropdownOption.style.visibility  =  'hidden'
           else
                       document.all.dropdownOption.style.visibility  =  'visible'
}

function  init(){
           document.all.dropdownOption.style.width  =  document.all.selectLength.clientWidth  +  22;
           document.all.selectedValue.contentEditable  =  true;
           var  strTop  =  0;
           var  strLeft  =  0;
           var  e1  =  document.all.selectLength;
           while(e1.tagName  !=  "BODY"){
                       strTop  +=  e1.offsetTop
                       strLeft  +=  e1.offsetLeft
                       e1  =  e1.offsetParent
           }
           document.all.dropdownOption.style.top  =  String(strTop  +  24)  +  "px";
           document.all.dropdownOption.style.left  =  String(strLeft)  +  "px";
}

function  clickE(){
           if(window.event.srcElement.id  !='mm')
                       document.all.dropdownOption.style.visibility  =  'hidden';
}

document.onclick  =  clickE
window.onload  =  init
</script>
<br/>
<br/>
<form name=form>
  <input  type="button"  value="得到选中的值"  onclick="alert(document.all.selectedValue.innerText)">
</form>
</body>
</html>

#14

建议楼主用风语者的可输入的下拉框那个，就是里面有“你是我的女人”的那个，很好改的

#15

修改后如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
<%
sql="select *  from testerresult "
set rs=server.createobject("adodb.recordset")
rs.open sql,conn,3,2
do while not rs.eof
  %>
  <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:风语者呵呵">
    <td><%=rs("subject")%></td>
  </tr>
<%
rs.movenext
loop
rs.close
set rs=nothing
conn.close
set conn=nothing
%>

#16

关注...

#17

To:梧桐雨

我发现一个问题：就是读出的数据太多了，影响页面显示。能不能加个滚动条呢？

#18

呵呵
看起来是个下拉框，其实是一个文本框，加一个表格来实现的，我也不知道怎么才能限制显示的数目或者就是你说的加滚动条，你给风语者发个短信问问，要不就问问海娃，看看怎么能从数据库中取数据,问这个（http://www.51windows.net/hw/asp/jsview.asp?id=318）

#19

whghwujx(梧桐雨) 说的对，阿信的菜单只用加一个form就可以了！

#20

呵呵，UP！

#21

To 梧桐雨：

我知道是文本框+表格实现的。也成功了。就是不知道能不能加上滚动条。因为一旦数据量超过200的话。那么，表格就变得非常长了。非常影响页面美观。

#22

#23

到阿信的站点去下一个吧，http://fason.nease.net/
那个树状目录就不错，可以分类。应该很适合楼主

#24

各位还是没有解决楼主的问题啊
UP

#25

up!
希望红星星们来给解决一下

#26

呵呵，再UP一下下
好像我比楼主还着急呢

#27

#28

up
仍然没有解决
up

#1

#2

#3

#4