基于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">
<option value="1">

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了JS对象与json字符串格式转换的实现方法,分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title/title script type="text/javascript" var obj = new Object(); obj.Name = "八戒" obj.Age = 500; //通过字面量的形式来定义对象 var obj1
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多次。两个函数的参数也相
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: !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" xml:lang="en" head meta http-equiv
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。 * 不同的域之间相互请求资源,就叫“跨域”。 比如: http://www.abc.com/index.html 请求 http://www.def
本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下: index.html页面: div class="warning"h2Native web camera streaming (getUserMedia) is not supported in this browser./h2/divdiv class="container" h3Current filter is: None/h3 buttonClick here to change video fil
我遇到的问题是:url里的参数内容包含符合,我有两种方法解决 其一方法是:在页面用JS转码 ,例子如下(前端处理) 复制代码 代码如下: a href=#>script language="javascript" function test(a,b){ alert("test"); location.href=#>} /script 其二方法是:在后端处理 1jsp: 复制代码 代码如下: a href=#> 2java bean: group 复制代码 代码如下: String cn;//要显示的CN S
复制代码 代码如下: /*7536-7646*/ animate: function( prop, speed, easing, callback ) { if ( jQuery.isEmptyObject( prop ) ) { return this.each( optall.complete ); } //#7864行this.options.complete.call( this.elem )使得其可以不断的连续执行动画,比如$(‘selector').animate({prop1},speed1
废话不多说,直接奉上代码 JS script type="text/javascript"function Sum(arg1,arg2){ //数值加法函数var sarg1 = new String(arg1); //将传入的参数转为字符串以便进行参数检查var sarg2 = new String(arg2); //将参数2转为字符类型if( (sarg1=="")||(sarg2=="") ) //确保参数不为空{var e0 = new Error(); //当有参数为空则抛出异常e0.Seria
本文实例讲述了基于jQuery实现的旋转彩圈。分享给大家供大家参考。具体实现方法如下: !DOCTYPE htmlhtmlheadscript src="jquery-1.7.1.min.js"/scriptscriptfor(var i=0;i100000;i++){if(i%4==0)setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'
当今 JavaScript 大行其道,各种应用对其依赖日深。web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解。所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不清道不明,即使使用了框架,其代码组织也非常糟糕。这都是对原生 JavaScript 语言特性理解不够的表现。要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的