经过分析，网上的参考，终于搞定了~~

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...

本文原创发布php中文网，转载请注明出处，感谢您的尊重！