可编辑下拉框的2种实现方式


Posted in Javascript onJune 13, 2014

可编辑下拉框-HTML

<div style="position:relative;"> 
<select style="width:120px;" onchange="document.getElementById('input').value=this.value"> 
<option value="A类">A类</option> 
<option value="B类">B类</option> 
<option value="C类">C类</option> 
<option value="D类">D类</option> 
</select> 
<input id="input" name="input" style="position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;"> 
</div>

可编辑下拉框-JS
<html> 
<head> 
<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> 
<meta name="ProgId" content="FrontPage.Editor.Document"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>可编辑下拉框</title> 
</head> 
<body> 
<table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center"> 
<tr> 
<td width="60%" height="30" align="center"> 
<select name="fason"> 
<option value="可编辑下拉框">可编辑下拉框</option> 
<option value="作者">作者</option> 
</select> 
</td> 
</tr> 
</table> 
<script language="javascript"> 
function combox(obj,select){ 
this.obj=obj 
this.name=select; 
this.select=document.getElementsByName(select)[0]; 
/*要转换的下拉框*/ 
} 
/*初始化对象*/ 
combox.prototype.init=function(){ 
var inputbox="<input name='combox_"+this.name+"' onchange='"+this.obj+".find()' " 
inputbox+="style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>" 
document.write(inputbox) 
with(this.select.style){ 
left=getL(this.select) 
top=getT(this.select) 
position="absolute" 
clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")" 
/*切割下拉框*/ 
} 
this.select.onchange=new Function(this.obj+".change()") 
this.change() } 
/*初始化结束*/ 
////////对象事件定义/////// 
combox.prototype.find=function(){ 
/*当搜索到输入框的值时,下拉框自动定位*/ 
var inputbox=document.getElementsByName("combox_"+this.name)[0] 
with(this.select){ 
for(i=0;i<options.length;i++) 
if(options[i].text.indexOf(inputbox.value)==0){ 
selectedIndex=i 
this.change(); 
break; 
} 
} 
} 
combox.prototype.change=function(){ 
/*定义下拉框的onchange事件*/ 
var inputbox=document.getElementsByName("combox_"+this.name)[0] 
inputbox.value=this.select.options[this.select.selectedIndex].text; 
with(inputbox){select();focus()}; 
} 
////////对象事件结束/////// 
/*公用定位函数(获取控件绝对坐标)*/ 
function getL(e){ 
var l=e.offsetLeft; 
while(e=e.offsetParent)l+=e.offsetLeft; 
return l 
} 
function getT(e){ 
var t=e.offsetTop; 
while(e=e.offsetParent)t+=e.offsetTop; 
return t 
} 
/*结束*/ 
</script> 
<script language="javascript"> 
var a=new combox("a","fason") 
a.init() 
</script> 
</body> 
</html>
Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
js表头排序实现方法
Jan 16 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 #Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 #Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 #Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 #Javascript
js获取当前页面的url网址信息
Jun 12 #Javascript
jquery 3D 标签云示例代码
Jun 12 #Javascript
javascript面向对象特性代码实例
Jun 12 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
寻找网站后台地址的python脚本
2014/09/01 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
基于django传递数据到后端的例子
2019/08/16 Python
基于python实现地址和经纬度转换
2020/05/19 Python
大学生饮食连锁店创业计划书
2014/01/17 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
员工规章制度范本
2015/08/07 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技