重新开帖问：如何让下拉框可以输入？

joyceme 2006-03-15 09:24:16

昨天一个大侠给了一个办法，在我这边没有解决问题
唉，再请大家指点！
如何让一个下拉框又可以选又可以自己输入？

...全文

349 8 点赞打赏收藏举报

写回复

8 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

crazy_he 2006-03-15

<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>

打赏
举报

回复赞

joyceme 2006-03-15

<td>
<div style="position:relative;">

<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<% res = fd.getPublisher();
it = res.iterator();
while (it.hasNext()){
WordLiterTypeInfo temp = (WordLiterTypeInfo)it.next();
strChnName = temp.getChnName();

out.println("<option value="+strChnName+">"+strChnName+"</option>");
}
%>
</select>
</span>
<input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</td>

贴上我引用这段代码的代码，唉，大侠帮我看看有没有什么问题？还是不能实现。

打赏
举报

回复赞

joyceme 2006-03-15

发现了，呵呵，好像我的浏览器禁用了一些东西

打赏
举报

回复赞

joyceme 2006-03-15

rmouse大侠：你给的这两段代码，第一段可以实现输入了，但是下拉框就不能选了，可以点击但是点完之后内容不会出现在下拉框中；第二段我试了试，还是不能输入啊：（
是不是有什么要注意的我没有注意到？
请指点！

打赏
举报

回复赞

rmouse_2005 2006-03-15

再来一个

<script>
function pp(){
ye.options[2]=new Option(ok=(ye.options[2])?ye.options[2].innerText+String.fromCharCode(event.keyCode):String.fromCharCode(event.keyCode),"client")
ye.selectedIndex=2;
}

function edit(){
if(ye.options[2]){
if(event.keyCode==8){
var str=ye.options[2].innerText;
var len=str.length;
ye.options[2].innerText=str.substring(0,len-1);
if(ye.options[2].innerText=="")ye.remove(2);
}
if(event.keyCode==13)return false;
if(event.keyCode==32){
ye.options[2].innerText+=" ";

}
}
}
</script>
<select id=ye onkeypress=pp() onkeyup="edit()">
<option>测试程序
<option>javascript
</select>

打赏
举报

回复赞

rmouse_2005 2006-03-15

<HTML>

<HEAD>

<META http-equiv='Content-Type' content='text/html; charset=gb2312'>

<TITLE>可输入的下拉框</TITLE>

</HEAD>

<BODY >

<div style="position:relative;">

<span style="margin-left:100px;width:18px;overflow:hidden;">

<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">

<option value="www.bbsou.com"> WebASP </option>

<option value="www.eWebSoft.com"> eWebSoft </option>

<option value="WEB开发者"> WEB开发者 </option>

</select></span><input name="box" style="width:100px;position:absolute;left:0px;">

</div>

</BODY></HTML>

呵呵,这个简单一点

打赏
举报

回复赞

grapepaul 2006-03-15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="combox.js"></script>
</HEAD>
<BODY>
<table border="1" style="border-collapse:collapse ">
<tr>
<td width="300"><select name=test1>
<option value="可编辑下拉框1" selected>可编辑下拉框1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<INPUT TYPE="button" value="获取编辑框1的值" onclick="alert(document.getElementById('username').value)">
</td>
<td width="109"><select name=test2>
<option value="可编辑下拉框2">可编辑下拉框25555555</option>
<option value="1">4</option>
<option value="2" selected>5</option>
<option value="3">6</option>
</select>
</td>
<td width="343">
<INPUT TYPE="button" value="获取编辑框2的值" onclick="alert(document.getElementById('password').value)">
</td>
</tr>
</table>
<script language="javascript">
var a=new combox("username","test1");
//参数1为新生成输入框的名称
//参数2为原来的select对象名称
a.init(a);
var b=new combox("password","test2");
b.init(b);

function combox(_inpuObjName,_controlSelectName)
{
//生成的输入框对象名称
this.inpuObjName=_inpuObjName;
//生成的输入框对象
this.inputbox=null;
//原来的下拉框对象
this.controlSelect=document.getElementById(_controlSelectName);

//初始化对象
//_comboxObj:combox对象，须指向自己
this.init=function(_comboxObj)
{
this.inputbox=document.createElement("input");
this.inputbox.id=this.inpuObjName;
this.inputbox.comboxObj=_comboxObj;
this.inputbox.onchange=function()
{
this.comboxObj.find();
}
with(this.inputbox.style)
{
width=this.controlSelect.offsetWidth-16;
height=this.controlSelect.offsetHeight;
}
this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox);
_span=document.createElement("span");
_span.style.width=18;
this.controlSelect.insertAdjacentElement("beforeBegin",_span);
_span.appendChild(this.controlSelect);
_container=document.createElement("span");
this.inputbox.insertAdjacentElement("beforeBegin",_container);
_container.appendChild(this.inputbox);
_container.appendChild(_span);
_container.style.width=this.inputbox.offsetWidth+18;
_width=this.controlSelect.offsetWidth-18;
with (this.controlSelect.style)
{
margin="0 0 0 -"+_width;
}
this.controlSelect.comboxObj=_comboxObj;
this.controlSelect.onchange=function()
{
this.comboxObj.change();
}
this.change();
}
//当搜索到输入框的值时,下拉框自动定位/
this.find=function()
{
with (this.controlSelect)
{
for(i=0;i<options.length;i++)
if(options[i].text.indexOf(this.inputbox.value)==0)
{
selectedIndex=i;
this.change();
break;
}
}
}
//定义下拉框的onchange事件
this.change=function()
{
this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text;
with (this.inputbox)
{
select();
focus();
}
}
}
/**
* 定位函数，获取控件绝对坐标
*/
function getLeftPos(e)
{
var left=e.offsetLeft;
while (e=e.offsetParent)
{
left+=e.offsetLeft;
}
return left;
}
function getTopPos(e)
{
var top=e.offsetTop;
while (e=e.offsetParent)
{
top+=e.offsetTop;
}
return top;
}　　
</script>
</BODY>
</HTML>