基于jquery实现的可以编辑选择的下拉框的代码


Posted in Javascript onNovember 19, 2010

效果图:
基于jquery实现的可以编辑选择的下拉框的代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>可以编辑的下来框实现方法--woody.wu</title> 
<style type="text/css"> 
.cssINPUT 
{ 
height: 19PX; 
padding: 3PX; 
padding-left: 3px; 
padding-right: 0px; 
margin: 0PX; 
border: 1PX SOLID #C0C0C0; 
font-family: 宋体,arial; 
font-size: 9pt; 
} 
.select_div_list 
{ 
position: absolute; 
border: 1px solid black; 
background-color: White; 
overflow: hidden; 
overflow-y: auto; 
} 
.select_div_list_ul 
{ 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
} 
.select_div_list_ul li 
{ 
cursor: pointer; 
padding-left: 3px; 
font-family: 宋体,arial; 
font-size: 9pt; *padding:0px;*height:20px;_height:14px;_margin:0px;_height:14px;*margin:0px;line-height:14px;} 
.selectSPAN 
{ 
background-color: Yellow; 
} 
</style> 
<script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
var inputID = "input1"; 
var selectID = "select1"; 
var widt = 0; 
var inputWi = 0; 
var he = 0; 
$(function() { 
inputID = "input1"; 
selectID = "select1"; 
widt = 200; 
inputWi = widt - 20; 
he = $("#user").height() - 41; 
var offset = $("input[id=input1]").offset(); 
$("#" + selectID).change(function() { 
var newvar = $("#" + selectID).find("option:selected").text(); 
$("#" + inputID).val(newvar); 
}).click(function() { 
$("#select_div_on_key" + selectID).remove(); 
}).css({ "display": "block", "width": widt + "px", "z-index": 1, "clip": "rect(0px " + widt + "px 51px 151px)" }); 
$("#" + inputID).keyup(function() { 
ShowSelectCombo(); 
}).click(function() { 
ShowSelectCombo(); 
}).css({ "z-index": 2, "width": inputWi + "px" }); ; 
}); 
function ShowSelectCombo() { 
var pob = $("#" + inputID); 
var v = pob.val(); 
var off = pob.offset(); 
var wi = pob.width() + 16; 
var tp = off.top + pob.height() - 100 + 7; 
var lef = off.left - 200 + 2; 
var html = "<div class='select_div_list' id='select_div_on_key" + selectID + "' style='width:" + wi + "px;top:" + tp + "px;left:" + lef + "px;'><ul class='select_div_list_ul'>"; 
$("#" + selectID).find("option").each(function() { 
var tk = $(this); 
html += "<li val='" + tk.val() + "' ht='" + encodeURIComponent(tk.html()) + "'>" + tk.html().replace(v, "<span class='selectSPAN'>" + v + "</span>") + "</li>"; 
}); 
html += "</ul></div>"; 
var ulDIV = $("#select_div_on_key" + selectID); 
ulDIV.remove(); 
$("#user").append(html); 
var ulDIV = $("#select_div_on_key" + selectID); 
var hei = ulDIV.find("ul").height(); 
var newHeight = hei > he ? he : hei; 
ulDIV.css({ height: newHeight + "px" }); 
ulDIV.find("li").hover(function() { 
$(this).css({ "background-color": "#316ac5" }); 
}, function() { 
$(this).css({ "background-color": "white" }); 
}); 
ulDIV.find("li").click(function() { 
var ki = $(this); 
var va = ki.attr("val"); 
var htm = ki.attr("ht"); 
htm = decodeURIComponent(htm); 
$("#" + inputID).val(htm); 
$("#" + selectID).val(va); 
ulDIV.remove(); 
}); 
} 
</script> 
</head> 
<body> 
<form name="form1" method="post" action="qqq.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIxMjQ5OTYwOTdkZH49VftoWVz/vaIL4f2byf4/w86b" /> 
</div> 
<div> 
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDwL15JrvCgL2jaW0BgL3jaW0BgL0jaW0BgL1jaW0BgLyjaW0BgLzjaW0BgLwjaW0BgLujaW0BgL3jeW3BgKm4u6hCAL3je23BgL3jdG3BgL3jdW3BgL3jdm3BnqAGtu2PbiTi9dWHvWrW6QCqrYo" /> 
</div> 
<div style='position: absolute; top: 100px; width: 500px; left: 200px; padding: 10px; 
height: 400px; border: 1px solid red;' id='user'> 
<div> 
<div style='overflow: hidden; margin-top: 10px; height: 30px;'> 
<input id="input1" name="input1" type="text" class='cssINPUT' style='_height: 20px; 
*height: 13px; display: block; float: left; position: absolute; border-right: 0px;' /> 
<select name="select1" id="select1" class="cssINPUT" style="float: left; 
display: none; height: 27PX; position: absolute; cursor: pointer; margin-left: 2px; 
padding: 0px;"> 
<option value="1">?身和底?修整???lt;/option> 
<option value="2">真空吸?</option> 
<option value="3">氧/乙炔焊割工具</option> 
<option value="4">冷?机 </option> 
<option value="5">大市?鋈龅?lt;/option> 
<option value="6">大擦</option> 
<option value="7">第三十</option> 
<option value="9">大市??lt;/option> 
<option value="20">?身外形修复机(介子机)</option> 
<option value="1022">沙皮狗</option> 
<option value="22">整形机</option> 
<option value="23">?升机</option> 
<option value="24">修?躺板</option> 
<option value="25">空?制冷?┏渥⒒ </option> 
</select> 
</div> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
基于jquery的跨域调用文件
Nov 19 #Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 #Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
JQuery 选择和过滤方法代码总结
Nov 19 #Javascript
You might like
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php函数连续调用实例分析
2015/07/30 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Django 内置权限扩展案例详解
2019/03/04 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python编写实现抽奖器
2020/09/10 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
教师岗位职责
2013/11/17 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
职业规划书如何设计?
2014/01/09 职场文书
教学大赛获奖感言
2014/01/15 职场文书
购房协议书范本
2014/04/11 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫