重新开帖问:如何让下拉框可以输入?

joyceme 2006-03-15 09:24:16
昨天一个大侠给了一个办法,在我这边没有解决问题
唉,再请大家指点!
如何让一个下拉框又可以选又可以自己输入?
...全文
407 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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 插件包括: persistent_layers 不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一次为多张图片加入alt说明 calendarPopup 一个弹出日历表格,用以确保输入的日历是按照特定的格式进行输入的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标效果 addToFavoritesBH 制作加入收藏夹的链接 Anchors 建立扩展的命令锚点 BustFrames 让其他网页无法将你的主页加载入框架页中 Calendar 为指定月份建立日历 ClosePopupWindow 制作关闭弹出的窗口 CloseWindowOb 建立关闭当前窗口的链接 mm_flabutton_styles 为DW4增加几款新的Flash按钮样式 mx142100_mmflabuttonstyles 13款Flash Button,并带有.fla的源文件 mx196756_turkeyscounties 80多个国家的一个下拉菜单 FlashImage 响应鼠标事件的图片渐显渐隐效果 real_networks 在页面中插入流式播放的Real视频和音频文件 MX131662_pdreloadxtension 从新加载Dreamweaver的各项插件,不用重复的启动关闭Dreamweaver了 DateStamp 插入一个日期,或者网页的最后更新日期 Email 插入一个Email的连接,可以自己指定标题、BB、BBC、以及message! ie55_scroll 自定义浏览器滚动条的特效CSS Marquee 插入滚动文字效果 scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 flashtext 制作仿Flash的文字效果 typewriter 让一段文字以打字的效果出现 gradient_text 在网页里生成一段色彩渐变的文字 footnote 增加一个弹出的注释,就像image 的alt=…… ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML的脚注(即注释) insert_greeting 根据不同的时段插入不同的候语 script_editor 让你更方便的编辑脚本,包括外部脚本 popup_menu_builder 帮助您轻松创建一个跨浏览器的弹出菜单 TableLines 文章文字各行间都有横线分离 alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash结合起来了,选择文本,执行该Command,swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手,可以用于导航菜单的设计,特别是导航项很多的场合 disable_view_source 让网页源代码无法观看 vmkp_flash_buttons Flash按钮 iframe 内帖窗口(页中页效果) open_picture_window 打开一个与缩略图一样大小的窗口 MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、溶解...... Meta_Generator 网页 Meta 管理器,可以详细设置Meta Fix_Null_Links 把所有的“#”替换成“javascript”来避免一点击它,网页马上就翻到了顶部 advopenwindow 弹出窗口(窗口居中、总在最前面、自动关闭、全屏、无边框窗口) averagedistribute 单元格平均分布 Quick_Title 建立文字型的Title说明 Open_Browser_Window+ 操作弹出式窗口升级版 StyleApplier 表格的鼠标触发效果 checkform 表单验证插件 Realplayer 嵌入网页Real播放器插件 BannerImageBuilder 创建多图片随机显示 CloseCW 方便的插入一个关闭当前页面的按钮,可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent floatimg 在页面上制作的飘浮图片插件,没时间封装 mmJIK Macromedia亲自为Flash 5开发的插件,功能太强大了 MX186725_splash_window 也叫chromeless splash , 一种效果很不错的浏览器窗口 MX175723_DWinamp 可以方便的在DW中控制Winamp,边工作,边听音乐 languagemenu 包括所有语言的下拉菜单(object) MX162506_persist_layer 不论浏览器的滚动条怎么拉,用这个插件插入的层总是保持在某个位置不动 MX156958_e-VueObject 插入e-Vue MPEG-4格式的文件 Sound 插入Midi、wav、Aiff等格式的声音文件 MX172878_sup_sub_ext 插入上标、下标 Videoembed 插入视频文件,还可以加上控制按钮 NowhereLink 插入一个空连接,点击后不会返回到页面顶部 ExternalJS 调用一个外部的.JS脚本语言文件 includeJSfile_hp 调用一个外部的.JS脚本语言文件,插入到<head>区域内 Addramesets 给你的Dreamweaver再加入14种框架模板(command) Title_for_Links 给文字连接加上说明(command) ChinaDW 功能是一个中国省市自制区的下拉框 Xwindow 没有边框,没有Title的窗口 MX143626_GoBackorForward 类似于浏览器的前进和后退按钮,但是可以指定每次前进的次数 coolborder 平时插入的表格的border又粗又难看,用这个插件插入看看边框(object) Set_IE_Scrollbars 设置IE是否出现右边的滚动条,可以适用于单个,多个,整个站点的页面 MX174513_Super_Email 插入一个不打开客户端的默认邮件程序来发送email的超连接 iframei 一个面板插件,可以对iframe标签的属性进行设置(inspector) MX179510_flashbuttons 一些Flash Button,一共7款 X164476_nirvana_iframePack 一组关于iframe的插件,可以动态的改变iframe中的页面 MX152319_save_all 在Drw的File菜单下加一个Save All命令,用来保存所有Dreamweaver窗口的文件 Layerfx 可以让层做绕定轴转动、震动、加速运动....... xp_jmail UD中使用的插件。 Scrolling_Title IE标题栏的文字滚动的效果 RefreshPageLink 建立一个刷新当前页面的链接。 quick filter 使用CSS滤镜对图片进行快速设置(右键、目标另存为) adv_random_images 这是随机显示图片的新版本,可以定制图片的很多相关属性。 scrolling_status_bar 插入打字效果状态栏文字。 form_button_fever 使用文字或者图片取代submit、reset 按钮 compare_fields 用来验证表单内2个文本框的值是否相同,通常用来检验密码是否一致。并可以自定义抱错信息。 ASP Dream 很方便的插入ASP语句,具有向导模式 Ultra Close Window 直接关闭窗口,不弹出确认关闭的对话框 flat_button 用CSS改变了样式的文本框或按钮 format_css_4 规范化<style>代码,附带若干选项设置。 explore 在DW的Site窗口中选中文件夹后在右键菜单中添加一条“在资源管理器中打开...”的命令
persistent_layers 不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一次为多张图片加入alt说明 calendarPopup 一个弹出日历表格,用以确保输入的日历是按照特定的格式进行输入的,主要特色包括:日历链接,按照需要的方式设定日历的格式,按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标效果 addToFavoritesBH 制作加入收藏夹的链接 Anchors 建立扩展的命令锚点 BustFrames 让其他网页无法将你的主页加载入框架页中 Calendar 为指定月份建立日历 ClosePopupWindow 制作关闭弹出的窗口 CloseWindowOb 建立关闭当前窗口的链接 mm_flabutton_styles 为DW4增加几款新的Flash按钮样式 mx142100_mmflabuttonstyles 13款Flash Button,并带有.fla的源文件 mx196756_turkeyscounties 80多个国家的一个下拉菜单 FlashImage 响应鼠标事件的图片渐显渐隐效果 real_networks 在页面中插入流式播放的Real视频和音频文件 MX131662_pdreloadxtension 从新加载Dreamweaver的各项插件,不用重复的启动关闭Dreamweaver了 DateStamp 插入一个日期,或者网页的最后更新日期 Email 插入一个Email的连接,可以自己指定标题、BB、BBC、以及message! ie55_scroll 自定义浏览器滚动条的特效CSS Marquee 插入滚动文字效果 scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 flashtext 制作仿Flash的文字效果 typewriter 让一段文字以打字的效果出现 gradient_text 在网页里生成一段色彩渐变的文字 footnote 增加一个弹出的注释,就像image 的alt=…… ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML的脚注(即注释) insert_greeting 根据不同的时段插入不同的候语 script_editor 让你更方便的编辑脚本,包括外部脚本 popup_menu_builder 帮助您轻松创建一个跨浏览器的弹出菜单 TableLines 文章文字各行间都有横线分离 alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash结合起来了,选择文本,执行该Command,swf动画就轻易的生成了 SliderMenu 设计导航菜单的绝佳助手,可以用于导航菜单的设计,特别是导航项很多的场合 disable_view_source 让网页源代码无法观看 vmkp_flash_buttons Flash按钮 iframe 内帖窗口(页中页效果) open_picture_window 打开一个与缩略图一样大小的窗口 MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、溶解...... Meta_Generator 网页 Meta 管理器,可以详细设置Meta Fix_Null_Links 把所有的“#”替换成“javascript”来避免一点击它,网页马上就翻到了顶部 advopenwindow 弹出窗口(窗口居中、总在最前面、自动关闭、全屏、无边框窗口) averagedistribute 单元格平均分布 Quick_Title 建立文字型的Title说明 Open_Brows

81,122

社区成员

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

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