JavaScript实现下拉列表框可编辑功能
作者:青柠时间:2026-10-28 06:32:01浏览:204
本文介绍如何使用JavaScript结合键盘事件(keydown和keypress)实现下拉列表框的可编辑功能。通过监听按键代码,动态修改选项文本,允许用户输入新值。示例包含完整的JS逻辑和HTML结构,适用于需要灵活输入的下拉场景。
JavaScript实现下拉列表可编辑功能
实现代码如下:
<script>
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获取
jQuery("#aa").empty();
jQuery("#aa").append("<option value=''></option>");
}
</script> HTML结构代码如下:
<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();"/>作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
