前端下拉框能支持手动输入_可输入的select下拉框
当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项。
在输入信息项时，不改变select下拉框中原有的信息项。
通过Backspace键可以清除刚才输入的信息项，以便重新输入。如果不清除，再输入信息时，会在原来输入的基础之上继续添加信息。如：原来手动输入信息是111，如果不清除再输入222时，信息项就变成111222
可输入的select下拉框11
22
33
function writeSelect(obj){
obj.options[0].selected = "select";
obj.options[0].text = obj.options[0].text + String.fromCharCode(event.keyCode);
event.returnValue=false;
return obj.options[0].text;
}
function ttt(){
var ss = document.getElementById("aa").value;
var jg = "";
if(ss == ""){
var aas = writeSelect(document.getElementById("aa"));
jg = aas;
}else{
jg = document.getElementById("aa").value;
}
alert(jg);
}
代码只是为了展示select下拉框可输入情况，具体一些细节方面，有待完善。
分享到：
2008-12-17 17:32
浏览 10371
论坛回复 / 浏览 (11 / 21214)
评论
11 楼
clone168
2009-08-23
所以那个函数执行了两次，也就是不仅仅是IE下的问题了
10 楼
jianguang_qq
2009-08-23
我靠，没看到“ie有输入双字符的问题，修改中。。。”这几个字吗
9 楼
clone168
2009-08-23
再化简下代码：
支持逐个删除。中文支持上还有点问题，有待再优化，ie有输入双字符的问题，修改中。。。
不过貌似还是存在一点bug，输入的时候存在问题，输入的时候，先触发keydown然后再触发keypress
8 楼
clone168
2009-08-23
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
你回复的真快，我正在修改呢。请再看上面修改后的。
嗯，呵呵，我正在看你的最新版，不错
7 楼
jianguang_qq
2009-08-23
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
你回复的真快，我正在修改呢。请再看上面修改后的。
6 楼
clone168
2009-08-23
再化简下代码：
只优化了两个函数实现，命名、html等我就不优化了，知道lz也是为了测试随便写的
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
5 楼
clone168
2009-08-23
function clearOption(obj,e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
if(currKey ==
{
obj.options[0].text = "";
}
}
function writeSelect(obj,e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
obj.options[0].selected = "select";
if(currKey !=
{//这个地方是为了避免在firefox又出现令人厌烦的乱码,可以试试注释这句话，看看在firefox的效果
obj.options[0].text = obj.options[0].text + String.fromCharCode(currKey);
}
e.returnValue=false;
return obj.options[0].text;
}
function ttt(){
var jg = document.getElementById("aa").options[document.getElementById("aa").selectedIndex].text;
//当然也可以在前面的writeSelect函数里面同时设置options的value，这样的话，直接可以在该程序里面用value取出
alert(jg);
}
仅仅是在原来的基础上修改，包括命名都没有考虑，甚至函数的个数都没有改变
当然这里还可以优化，两个函数有一部分是相同的，其实可以再封装一次，方便以后调用，楼主可以试试，呵呵
4 楼
jianguang_qq
2009-08-23
再化简下代码：
支持逐个删除。ff中文支持上还有点问题，有待再优化。
该死的ie 和ff事件兼容性问题。
楼主例子很不错，让我在优化过程中学到了，好些东西。一会儿总结一下。
3 楼
jianguang_qq
2009-08-23
作者创意不错，赞一个
！！！
οnkeypress="writeSelect(this)" 改成 οnkeypress="writeSelect(this,event)";
function writeSelect(obj) 改成 function writeSelect(obj,event)
String.fromCharCode(event.keyCode) 改成 String.fromCharCode(event.charCode||event.keyCode)
就支持ff了。
可惜ff下不支持中文，囧，去查查原因。
2 楼
clone168
2009-08-23
又是一个不支持firefox的程序~~~
1 楼
fhyfufangyu
2009-07-27
backspace 没有用啊？