当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下拉框可输入情况，具体一些细节方面，有待完善。
分享到：
-12-17 17:32
浏览 10371
论坛回复 / 浏览 (11 / 21214)
评论
11 楼
clone168
-08-23
clone168输入的时候，先触发keydown然后再触发keypress
所以那个函数执行了两次，也就是不仅仅是IE下的问题了
10 楼
jianguang_qq
-08-23
我靠，没看到“ie有输入双字符的问题，修改中。。。”这几个字吗
9 楼
clone168
-08-23
jianguang_qq 写道
再化简下代码：
<body >
<select id="select" οnkeydοwn="selectWrite(this,event)" οnkeypress="selectWrite(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" id="test" οnclick="test();"/>
<script>
function selectWrite(obj,e){
var opt = obj.options[0];
opt.selected = "selected";
if((e.keyCode||e.charCode) ==
{
opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);
}else{
opt.text = opt.value += String.fromCharCode(e.charCode||e.keyCode);
}
}
function test(){
alert(document.getElementById("select").value);
}
</script>
</body>
支持逐个删除。中文支持上还有点问题，有待再优化，ie有输入双字符的问题，修改中。。。
不过貌似还是存在一点bug，输入的时候存在问题，输入的时候，先触发keydown然后再触发keypress
8 楼
clone168
-08-23
jianguang_qq 写道clone168 写道
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
你回复的真快，我正在修改呢。请再看上面修改后的。
嗯，呵呵，我正在看你的最新版，不错
7 楼
jianguang_qq
-08-23
clone168 写道
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
你回复的真快，我正在修改呢。请再看上面修改后的。
6 楼
clone168
-08-23
jianguang_qq 写道
再化简下代码：
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" οnkeydοwn="if(event.keyCode ==
{this.options[0].text = '';}" οnkeypress="writeSelect(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" id="test" οnclick="test();"/>
<script>
function writeSelect(obj,e){
opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode||e.keyCode);
}
function ttt(){
alert(document.getElementById("aa").value);
}
</script>
只优化了两个函数实现，命名、html等我就不优化了，知道lz也是为了测试随便写的
test函数不存在，
清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来
而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
5 楼
clone168
-08-23
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" οnkeydοwn="clearOption(this,event)" οnkeypress="writeSelect(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" οnclick="ttt();"/>
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
-08-23
再化简下代码：
<select id="select" οnkeydοwn="Select.del(this,event)" οnkeypress="Select.write(this,event)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" id="test" οnclick="test();"/>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) ==
{
var opt = obj.options[0];
opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);
}
},
write : function(obj,e){
if((e.keyCode||e.which||e.charCode) ==
return ;
var opt = obj.options[0];
opt.selected = "selected";
opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);
}
}
function test(){
alert(document.getElementById("select").value);
}
</script>
支持逐个删除。ff中文支持上还有点问题，有待再优化。
该死的ie 和ff事件兼容性问题。
楼主例子很不错，让我在优化过程中学到了，好些东西。一会儿总结一下。
3 楼
jianguang_qq
-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
-08-23
又是一个不支持firefox的程序~~~
1 楼
fhyfufangyu
-07-27
backspace 没有用啊？
