社区
Web 开发
帖子详情
重新开帖问:如何让下拉框可以输入?
joyceme
2006-03-15 09:24:16
昨天一个大侠给了一个办法,在我这边没有解决问题
唉,再请大家指点!
如何让一个下拉框又可以选又可以自己输入?
...全文
401
8
打赏
收藏
重新开帖问:如何让下拉框可以输入?
昨天一个大侠给了一个办法,在我这边没有解决问题 唉,再请大家指点! 如何让一个下拉框又可以选又可以自己输入?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
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>
eidolon_warrior
2006-03-15
打赏
举报
回复
下拉框不可以输入
用DHTML写一个用text和div模拟的Combo Box
Dreamweaver 插件集
一个弹出日历表格,用以确保
输入
的日历是按照特定的格式进行
输入
的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标...
70款经典Dreamweaver插件
calendarPopup 一个弹出日历表格,用以确保
输入
的日历是按照特定的格式进行
输入
的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...
javascript 常用代码大全
2.3 可以
输入
内容的
下拉框
2.4 多行文本框中只能
输入
iMax文字。如果多
输入
了,自动减少到iMax个文字(多用于短信发送) 3、打印类 3.1 打印控件 4、事件类 4.1 屏蔽右键 4.2 屏蔽所有功能键 4.3 --> 和,F9,F1 ...
网页
下拉框
智能诱导
输入
网页
下拉框
智能诱导
输入
使用说明(V5.0) *------------------------------------------------------------------------------------------------------------- * 〖功能简介〗 * * 1) 在填写表单时,对于
下拉框
有...
用SWT实现MSN风格的
下拉框
SWT一个所谓的优点是它的本地化外观,因为它是通过JNI调用操作系统的组件,从而可以保证外观上适合大多数用户的需求,但是一些IM类软件商往往希望它们的产品有着一套独特的外观,这对SWT这种原生组件来说就有些...
Web 开发
81,092
社区成员
341,717
社区内容
发帖
与我相关
我的任务
Web 开发
Java Web 开发
复制链接
扫一扫
分享
社区描述
Java Web 开发
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章