<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>可以编辑的下来框实现方法--woody.wu</title>
<style type="text/css">
.cssINPUT
{
height: 19px;
padding: 3px;
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="http://code.jquery.com/jquery-latest.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;//select宽=200
inputWi = widt - 20;//input宽
he = $("#user").height() - 41;
//console.log(he)
var offset = $("input[id=input1]").offset();
$("#" + selectID).change(function() {
var newvar = $("#" + selectID).find("option:selected").text();
$("#" + inputID).val(newvar);
//select 选中把val给input
}).click(function() {
$("#select_div_on_key" + selectID).remove();
//点击input清空val
}).css({ "display": "block", "width": widt + "px", "z-index": 1, "clip": "rect(0px " + widt + "px 51px 151px)" });
//clip裁剪绝对定位图片 clip属性值：auto | rect (top, right, bottom, left)
$("#" + inputID).keyup(function() {
ShowSelectCombo();
}).click(function() {
ShowSelectCombo();
}).css({ "z-index": 2, "width": inputWi + "px" }); ;
});
function ShowSelectCombo() {
//var pob = $("#" + inputID);
var pob = $("#input1");
// console.log(pob)
var v = pob.val();
//input val 值
var off = pob.offset();
var wi = pob.width() + 16;
//console.log(pob.width())
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='" + 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;
//console.log(newHeight)
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 style='position: absolute; top: 100px; 500px; left: 200px; padding: 10px;
height: 100px; 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;
height: 27PX; position: absolute; cursor: pointer; margin-left: 2px;
padding: 0px;">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广东</option>
<option value="5">太原</option>
<option value="6">西安</option>
</select>
</div>
</div>
</div>
</form>
<select name="" id="">
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
</select>
</body>
</html>