可输入下拉框

kalphon 2009-01-09 08:12:58

我想做类似于IE地址栏那样的文本框，输入文本自由能自动展开模糊查询的，目前用文本框的话无法下拉，用下拉框不能输入，请问有什么好办法？是不是用文本框+隐藏层实现？

...全文

428 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

kiss筱魔 2011-08-29

打赏
举报

手动添加内容，添加到下拉框里！
<select id=oSelect style="width:240px;">
<option value=0 selected>第0个OPTION子对象</option>
</select><br><br>
<table height=40 width=300><tr>
<td nowrap>文本: </td><td><input type=text id=oText size=20 value="第1个OPTION子对象"></td>
<td nowrap>序号: </td><td><input type=text id=oIndex size=4 value="1"></td>
<td><input type=button value=" 添加 " onclick="rdl_doAdd()"></td>
</tr></table>

function rdl_doAdd(){
var sText,iIndex;
with (document.all("oIndex")) iIndex=parseInt(value,10);
with (document.all("oText")) if (value=="") sText=value="第"+ iIndex.toString()+"个OPTION子对象";else sText=value;
var oOption = document.createElement("option");
oSelect.options.add(oOption,iIndex);
oOption.innerText=oOption.Value=sText;
oOption.selected=true;
}

抬头望远，低头沉思 2009-01-10

打赏
举报

[Quote=引用 2 楼 lihan6415151528 的回复:]
对，就是这个原理，用text+div来实现，如果空值时候则div隐藏，onblur事件后触发显示
至于DIV里面内容，就是ajax来实现从数据库里面获取了
[/Quote]
学习，就是lihan兄弟这么说的
看来我要加油了

fanyuanwaifdl 2009-01-10

打赏
举报

[Quote=引用 4 楼 wdz567 的回复:]
引用 2 楼 lihan6415151528 的回复:
对，就是这个原理，用text+div来实现，如果空值时候则div隐藏，onblur事件后触发显示
至于DIV里面内容，就是ajax来实现从数据库里面获取了
[/Quote]学习了

kingdomofhavean 2009-01-10

打赏
举报

给你段源码试试吧
html：
<select id="CardType" class="textarea" onkeypress="trigger(3)" onkeyup="edit(3)" name="CardType">
<option value="身份证">身份证</option>
<option value="军官证">军官证</option>
<option value="学生证">学生证</option>
</select>(如果下拉列表中不存在，可以直接输入)
js:
<script language="javascript">
function trigger(opt){
//opt表示现有可选项的数目
form1.CardType.options[opt]=new Option(form1.CardType.options[opt]?
form1.CardType.options[opt].innerText+String.fromCharCode(event.keyCode):
String.fromCharCode(event.keyCode))
form1.CardType.selectedIndex=opt; //设置下拉列表的选中项
}
function edit(opt){
//opt表示现有可选项的数目
if(form1.CardType.options[opt]){
if(event.keyCode==8){
var str=form1.CardType.options[opt].innerText;
var len=str.length;
form1.CardType.options[opt].innerText=str.substring(0,len-1);
if(form1.CardType.options[opt].innerText==""){
form1.CardType.remove(opt);
form1.CardType.selectedIndex=1;
};
}
if(event.keyCode==32){
form1.CardType.options[opt].innerText+=" ";
}
}
}
</script>