基于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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
JS计算斐波拉切代码实例
Sep 12 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python单例模式实例分析
2015/04/08 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python装饰器原理与用法分析
2018/04/30 Python
python图像处理入门(一)
2019/04/04 Python
keras中的backend.clip用法
2020/05/22 Python
python批量生成条形码的示例
2020/10/10 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
冬季安全检查方案
2014/05/23 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
大学生英文求职信范文
2015/03/19 职场文书