在html中实现可输入的下拉列表

dongbf2000 2006-03-05 04:39:50
在html中实现可输入的下拉列表,并且当输入的值在下拉列表中时,使下拉列表弹出并选中所输入的值。哪位大侠帮帮我啊!!!不胜感激!!!!
...全文
578 点赞 收藏 11
写回复
11 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
petertangh 2006-06-16
http://struts.application-servers.com/features/index.html

Lists:
Internationalized headers
Sort on the server or on the client
Pager
Row color alternance
Links
Editable columns
Rows selection
Pluggable data formatter
Emphasizing of specific rows
Nested lists
Customization of the generated HTML code
回复
yashya 2006-06-16
以前用过,下面的代码完全用html。看看吧

<table align="center" align="top" border="0" width="74%" height="892" cellspacing="5" cellpadding="0">
<tr>
<td width="100%" colspan="2" height="16"></td>
</tr>

<tr>
<td width="15%" height="23" align="left"><font size="2"></font></td>
<td width="85%" height="23">

<DIV style="CLIP: rect(3px 290px 21px 110px); HEIGHT: 21; LEFT: 250; POSITION: absolute; TOP: 80; WIDTH: 127; Z-INDEX: 1">

<SELECT name=myselect onchange=test.value=this.value style="WIDTH: 127px">
<OPTION selected></OPTION>
<OPTION value=zho>zho</OPTION>
<OPTION value=zhol>zhol</OPTION>
<OPTION value=zholl>zholl</OPTION>
<OPTION value=zholll>zholll</OPTION>
</SELECT>
</DIV>


<DIV style="HEIGHT: 21; LEFT: 250; POSITION: absolute; TOP: 80; WIDTH: 20; Z-INDEX: 2">

<INPUT name=test style="HEIGHT: 21; WIDTH:"20" size="16">

</DIV>

</td>
</tr>
</table>
回复
treeway 2006-06-16
占个位置
回复
dongbf2000 2006-06-16
syp1979(我是一阵风) 给的答案具有部分可行性,在此表示感谢!
crazy_he(天煞孤星) 给的答案好长啊,我想应该是个不错的答案,可是测试了一下,感觉不太好使,能否给一个完备的答案?
在此谢谢各位的答案,由于还没有等到很好的答案,准备再过些天结贴,到时一定会给帮助我的人给分的!!!!
回复
crazy_he 2006-03-06
<script>
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectÁÐ卤铆</div></div>'
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

function editselect(name,size,defaulttext,width,height,readonly){
var combo=this;
this.options=new Array();
this.name=name;
this.divname=name+'_div';
this.buttonname=name+'_button';
this.tablename=name+'_table';
this.htmltable=name+'_html'

if (!height) this.height=0; else this.height=height
if (width) this.width=width
if (!size) size=8
if (!defaulttext) defaulttext=""
if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}

esHTML='<div id='+this.divname+'>'
+'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
+'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
+'</div>'
document.write(esHTML)
this.sbutton=eval("document.all."+this.buttonname)

if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}

this.sbutton.onclick=function(){combo.show()}
this.show=function(){
pDiv=eval(combo.divname)
pTable=eval(combo.tablename)
var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
for (i=0;i<combo.options.length;i++)
{
vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i]
}
vHTML+="</table>"
vDivHtml.innerHTML=vHTML

vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+1


vParent = pDiv.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
vleft += vParent.offsetLeft;
vtop += vParent.offsetTop;
vParent = vParent.offsetParent;
}

var redge=document.body.clientWidth-vleft
var bedge=document.body.clientHeight-vtop



if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}


if (combo.height==0)
{
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}
else
{
if (htmltable.offsetHeight>combo.height)
{
vDiv.style.pixelHeight=combo.height
vDivHtml.style.pixelHeight=combo.height


}
else
{

vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}

}

vDivHtml.scrollTop=0

if (redge<vDiv.offsetWidth)
vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
else
vDiv.style.left=vleft-1


if (bedge<vDiv.offsetHeight)
//vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
vDiv.style.top=vtop-vDiv.offsetHeight+bedge
else
vDiv.style.top=vtop


vDivHtml.style.width=parseInt(vDiv.style.width)
vDiv.style.visibility="visible"
}

this.add=function(text){
combo.options[combo.options.length]=text
}

this.about=function(){

}
}


function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}

function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}

document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;

x1=vDiv.offsetLeft
y1=vDiv.offsetTop

x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight

if (mx<x1 || my<y1 || x2<mx || y2<my)
{
vDiv.style.visibility='hidden'
}
}
}
</script>

<td width="23%">

<script>
var sel1=new editselect("src","25","","");

sel1.add("1111111111");

sel1.add("22222222222");

sel1.add("33333333333");

sel1.add("lixin--2324");


</script>

</td>
回复
pigengler 2006-03-06
学习,学习
回复
syp1979 2006-03-06
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>

<body >
<table>
<tr>
<td>
<input type="text" name="text1" onchange="changeSelect(this);" size="14"><br>
<select name="select1" style="width=110">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<input type="hidden" name="option1Value" value="111">
<input type="hidden" name="option2Value" value="222">
<input type="hidden" name="option3Value" value="333">
</td>
</tr>
</table>
</body>
</html>

<script language="javascript">
function changeSelect(obj){

var objValue=obj.value;

if(document.all.option1Value.value==objValue){
select1.value="1";
}else if(document.all.option2Value.value==objValue){
select1.value="2";
}else if(document.all.option3Value.value==objValue){
select1.value="3";
}

}

</script>
回复
yrsheng 2006-03-06
给你一个最简单的实现:
<html>
<head><title>EditableListBox</title>
</head>
<body>
<select name="select" id="select" size="1" style="position:absolute; left: 10px; top: 10px; width: 120px; height: 20px; clip: rect(0 120 21 100)" onchange="textfield.value=select.value;textfield.select()">
<option value="aaaaaaaa">aaaaaaaa</option>
<option value="bbbbbbbb">bbbbbbbb</option>
<option value="cccccccc">cccccccc</option>
<option value="dddddddd">dddddddd</option>
<option value="eeeeeeee">eeeeeeee</option>
<option value="ffffffff">ffffffff</option>
</select><input type="text" style="position:absolute; left: 10px; top: 10px; width: 102px; height: 21px" name="textfield">
</body>
</html>
回复
doway 2006-03-05
HTML 本身并未提供那样的东西,楼主是想进行一项转基因工程,程序员应该有点环保意识。:)

回复
superman421 2006-03-05
用script写。
回复
doway 2006-03-05
不可以。
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2006-03-05 04:39
社区公告
暂无公告