经过分析，网上的参考，终于搞定了~~
jquery插件代码：
复制代码 代码如下:
jquery.fn.selectitem = function(targetid) {
var _seft = this;
var targetid = $(targetid);
this.toggle(
function() {
var a_top = $(this).offset().top + $(this).outerheight(true); // 1
var a_left = $(this).offset().left;
targetid.bgiframe();
targetid.show().css({ position: absolute, top: a_top + px, left: a_left + px });
}
, function() {
targetid.hide();
}
);
targetid.find(#selectitemclose).click(function() {
targetid.hide();
});
targetid.find(#selectsub :checkbox).click(function() {
targetid.find(:checkbox).attr(checked, false);
$(this).attr(checked, true);
_seft.val($(this).val());
targetid.hide();
});
$(document).click(function(event) {
if (event.target.id != _seft.selector.substring(1)) {
targetid.hide();
}
});
targetid.click(function(e) {
e.stoppropagation();
});
return this;
}
html代码：
复制代码 代码如下:
all
confidence
css样式：
复制代码 代码如下:
/* pop div begin */
.selectitemcont{padding:8px;}
.selectitemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;}
.bgc_ccc{background:#e88e22;}
.selectitemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}
.selectitemright{float:right;cursor:pointer;color:#fff;}
.selectitemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}
.selectitemhidden{display:none;}
#selectcompetencies
{
display:none;
background:#fff;
position:absolute;
top:0px;
left:center;
border:1px solid #000;
overflow-x:hidden;
overflow-y:auto;
width:250px;
z-index:1000;
max-height:200px;
}
/* pop div end */
javascript代码：
复制代码 代码如下:
$(#txtcompetencies).selectitem(#selectcompetencies);
实现点击文本框，在其正下方弹出一个新的层，再次点击的时候，隐藏层。
后面的话，我会把这个插件继续完善的~~~ o(∩_∩)o...