可编辑下拉框的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 DIV弹出效果实现代码
Jul 03 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
vue中v-model对select的绑定操作
Aug 31 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
PHP脚本的10个技巧(5)
2006/10/09 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php文件上传的简单实例
2013/10/19 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python读写csv文件的方法
2019/08/13 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
《猫》教学反思
2014/02/26 职场文书
联谊会主持词
2014/03/26 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS