|
锁定老帖子 主题：可输入的select下拉框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-12-17
最后修改：2008-12-26
当select下拉框中没有要选择的信息项时，可以直接在select中输入自己想要得信息项。
在输入信息项时，不改变select下拉框中原有的信息项。
通过Backspace键可以清除刚才输入的信息项，以便重新输入。如果不清除，再输入信息时，会在原来输入的基础之上继续添加信息。如：原来手动输入信息是111，如果不清除再输入222时，信息项就变成111222
<html>
<head>
<title>可输入的select下拉框</title>
</head>
<script>
</script>
<body >
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="if(event.keyCode == 8){this.options[0].text = '';}" onkeypress="writeSelect(this)">
<option value=""></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</select>
<input type="button" value="点我" onclick="ttt();"/>
<script>
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);
}
</script>
</body>
</html>
代码只是为了展示select下拉框可输入情况，具体一些细节方面，有待完善。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-07-27
backspace 没有用啊？
|
| 返回顶楼 | |
|
发表时间：2009-08-23
又是一个不支持firefox的程序~~~
|
| 返回顶楼 | |
|
发表时间：2009-08-23
最后修改：2009-08-23
作者创意不错，赞一个
 ！！！
onkeypress="writeSelect(this)" 改成 onkeypress="writeSelect(this,event)"; function writeSelect(obj) 改成 function writeSelect(obj,event) String.fromCharCode(event.keyCode) 改成 String.fromCharCode(event.charCode||event.keyCode) 就支持ff了。 可惜ff下不支持中文，囧，去查查原因。 |
| 返回顶楼 | |
|
发表时间：2009-08-23
最后修改：2009-08-24
再化简下代码： <select id="select" onkeydown="Select.del(this,event)" onkeypress="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" onclick="test();"/>
<script>
var Select = {
del : function(obj,e){
if((e.keyCode||e.which||e.charCode) == 8){
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) == 8)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事件兼容性问题。 楼主例子很不错，让我在优化过程中学到了，好些东西。一会儿总结一下。 |
| 返回顶楼 | |
|
发表时间：2009-08-23
最后修改：2009-08-23
<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="clearOption(this,event)" onkeypress="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="点我" onclick="ttt();"/> function clearOption(obj,e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
if(currKey == 8){
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 != 8){//这个地方是为了避免在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);
}
仅仅是在原来的基础上修改，包括命名都没有考虑，甚至函数的个数都没有改变 当然这里还可以优化，两个函数有一部分是相同的，其实可以再封装一次，方便以后调用，楼主可以试试，呵呵 |
| 返回顶楼 | |
|
发表时间：2009-08-23
jianguang_qq 写道
再化简下代码： <select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="if(event.keyCode == 8){this.options[0].text = '';}" onkeypress="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" onclick="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下拉的时候还能看到里面新增了乱码 |
| 返回顶楼 | |
|
发表时间：2009-08-23
clone168 写道
test函数不存在， 清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来 而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
|
| 返回顶楼 | |
|
发表时间：2009-08-23
jianguang_qq 写道
clone168 写道
test函数不存在， 清除的那个函数在IE中只是把text清除了，点击按钮弹出的还是value，还是会显示出来 而在firefox中则出现了连text都不会清除的情况，而且，把select下拉的时候还能看到里面新增了乱码
嗯，呵呵，我正在看你的最新版，不错 |
| 返回顶楼 | |
|
发表时间：2009-08-23
最后修改：2009-08-23
jianguang_qq 写道
再化简下代码： <body >
<select id="select" onkeydown="selectWrite(this,event)" onkeypress="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" onclick="test();"/>
<script>
function selectWrite(obj,e){
var opt = obj.options[0];
opt.selected = "selected";
if((e.keyCode||e.charCode) == 8){
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 |
| 返回顶楼 | |
