使用js实现一个可编辑的select下拉列表

 这篇文章主要介绍了使用js实现一个可编辑的select下拉列表,个人感觉还不错,需要的朋友可以参考下

 代码如下:
<select id="name" name="name" 
onkeydown="clearSelect(this,event);" 
onkeypress="writeSelect(this,event);" style="width:70px;"> 
<option value=""></option> 
<option value="test1">test1</option> 
<option value="test2">test2</option> 
<option value="test3">test3</option> 
</select> 
 
<script> 
function clearSelect(obj,e) 

opt = obj.options[0]; 
opt.selected = "selected"; 
if((e.keyCode== 8) ||(e.charCode==8))//使用退格(backspace)键实现逐字删除的编辑功能 

opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0); 
opt.text = opt.value; 

if((e.keyCode== 46) ||(e.charCode==46))//使用删除(Delete)键实现逐字删除的编辑功能 

opt.value = ""; 
opt.text = opt.value; 

//还可以实现其他按键的响应 

 
function writeSelect(obj,e) 

opt = obj.options[0]; 
opt.selected = "selected"; 
opt.value += String.fromCharCode(e.charCode||e.keyCode); 
opt.text = opt.value; 

function forbidBackSpace()//为了在IE中,避免backspace的返回上一页功能,和本下拉框的编辑功能冲突,需要禁掉backspace的功能。forbidBackSpace可以写在<body onkeydown="forbidBackSpace();">中。 

if((event.keyCode == 8) && (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")) 

event.keyCode = 0; 
event.returnValue = false; 


</script> 
 

时间: 2024-10-29 14:12:46

使用js实现一个可编辑的select下拉列表的相关文章

使用js实现一个可编辑的select下拉列表_javascript技巧

复制代码 代码如下: <select id="name" name="name" onkeydown="clearSelect(this,event);" onkeypress="writeSelect(this,event);" style="width:70px;"> <option value=""></option> <option va

求一个字符串编辑成为另一个字符串的最少操作数

原题链接: http://oj.leetcode.com/problems/edit-distance/ 这道题求一个字符串编辑成为另一个字符串的最少操作数,操作包括添加,删除或者替换一个字符.这道题难度是比较大的,用常规思路出来的方法一般都是brute force,而且还不一定正确.这其实是一道二维动态规划的题目,模型上确实不容易看出来,下面我们来说说递推式. 我们维护的变量res[i][j]表示的是word1的前i个字符和word2的前j个字符编辑的最少操作数是多少.假设我们拥有res[i]

使用Vue.js创建一个时间跟踪的单页应用_javascript技巧

Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

js+CSS实现模拟华丽的select控件下拉菜单效果_javascript技巧

本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

JS实现的5级联动Select下拉选择框实例_javascript技巧

本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

jquery根据一个值来选中select下的option实例代码_jquery

jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

从Js调用一个AS方法

js 从Js调用一个AS方法: 为了从js调用as的方法,你必须确认一下四个文件都包含在你的html文档中: <script type="text/javascript" src="/path/to/Exception.js"></script>  <script type="text/javascript" src="/path/to/FlashTag.js"></script>

js实现一个链接打开两个链接地址的方法

  本文实例讲述了js实现一个链接打开两个链接地址的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> <!-- function adClick(ad, site) { window.open(ad); window.location = site; } --> </script> <a href="javascript:adClick

JS实现网页背景颜色与select框中颜色同时变化的方法

 这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www