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

dongbf2000 2006-03-05 04:39:50
在html中实现可输入的下拉列表，并且当输入的值在下拉列表中时，使下拉列表弹出并选中所输入的值。哪位大侠帮帮我啊！！！不胜感激！！！！
...全文
690 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
不可以。
js实现input输入框输入信息后出现下拉选择框
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
Google Android SDK开发范例大全(PDF高清完整版3)（4-3）
6.10 实现可定时响起的闹钟——PendingIntent与AlarmManager的运用 6.11 黑名单来电自动静音——PhoneStateListener与AudioManager 6.12 手机翻背面即静音震动——SensorListener及AudioManager整合应用 6.13 指定...
Google Android SDK开发范例大全(PDF完整版4)（4-4）
6.10 实现可定时响起的闹钟——PendingIntent与AlarmManager的运用 6.11 黑名单来电自动静音——PhoneStateListener与AudioManager 6.12 手机翻背面即静音震动——SensorListener及AudioManager整合应用 6.13 指定...
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
6.10 实现可定时响起的闹钟——PendingIntent与AlarmManager的运用 6.11 黑名单来电自动静音——PhoneStateListener与AudioManager 6.12 手机翻背面即静音震动——SensorListener及AudioManager整合应用 6.13 指定...
html语言下拉菜单,html 中可以自定义输入的 select 下拉列表
那么问题就来了，如果按照上面的操作，往往需要很多步骤，能不能当没有可选项目时，直接在下拉列表上输入呢？答案是可以的。下面就是用 JS 实现了下拉列表上自定义选项的功能，请参考。可编辑的下拉列表.cls_select_...
Web 开发

81,092

社区成员

341,717

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章