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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>点击文本框弹出下拉菜单选择框效果_武鸣人</title>
<style>
/*reset css*/
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1em;font-weight:normal}
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none}
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline}
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative}
/*demo_wuming_ren css*/
#demo_wuming_ren input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000}
#box_wuming_ren{display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999}
#box_wuming_ren a{margin-right:8px;text-decoration:none}
#box_wuming_ren a:hover{text-decoration:underline}
#box_wuming_ren p{line-height:24px}
#box_wuming_ren em.close{float:right;color:#999;font-style:normal;cursor:pointer}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！
<div id="demo_wuming_ren">
<label for="box_www_wuming_ren"><strong>标签：</strong><input type="text" value="武鸣人提示您：点击这个文本框" readonly="readonly" class="box_www_wuming_ren" data-count="10" /></label>
<div id="box_wuming_ren">
<em class="close" title="关闭">关闭</em>
<p><strong>温馨提示：</strong>选择下面的热门标签及使用过的标签,标签将自动排列至表单域。</p>
<p><strong>热门标签：</strong><a href="javascript:void(0)">时光漫步</a><a href="javascript:void(0)">JavaScript</a><a href="javascript:void(0)">jQuery Plugin</a><a href="javascript:void(0)">那一年</a><a href="javascript:void(0)">jQuery插件</a><a href="javascript:void(0)">简单</a><a href="javascript:void(0)">星空</a><a href="javascript:void(0)">梦田</a><a href="javascript:void(0)">晴朗</a><a href="javascript:void(0)">wuming.ren</a></p>
<p><strong>您使用过的标签：</strong><a href="javascript:void(0)">许巍</a><a href="javascript:void(0)">Sophie Zelmani</a><a href="javascript:void(0)">王菲</a><a href="javascript:void(0)">武鸣人</a><a href="javascript:void(0)">Ke$Ha</a><a href="javascript:void(0)">Shakira</a><a href="javascript:void(0)">朴树</a><a href="javascript:void(0)">罗大佑</a></p>
</div>
<br style="clear:both" />
</div>
<script src="/img/jquery_wuming_ren.js"></script>
<script>
;(function($){
$.fn.bgIframe = $.fn.bgiframe = function(s) {
// This is only for IE6
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
s = $.extend({
top : 'auto', // auto == .currentStyle.borderTopWidth
left : 'auto', // auto == .currentStyle.borderLeftWidth
width : 'auto', // auto == offsetWidth
height : 'auto', // auto == offsetHeight
opacity : true,
src : 'javascript:false;'
}, s || {});
var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
'style="display:block;position:absolute;z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
'"/>';
return this.each(function() {
if ( $('> iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
});
}
return this;
};
})(jQuery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.box_www_wuming_ren',//表单或class或id名
drop:$('#box_wuming_ren'),//弹出框定位
pseudoClass:$('#box_wuming_ren>p>a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
}
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset().left; //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _txt=null;
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
}
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
}else {
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
}
});
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
}
}
});
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
});
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){
//_arr.push(_txt);
//_inputVal=_arr.join(iset.separator);
_inputVal=$(this).text();
// if(_inputVal.charAt(0)==','){
// _inputVal.replace(/,/,'')
// }
_input.val(_inputVal);
}
});
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
});
}
});
})(jQuery);
//插件调用
$(function(){
$('#demo_wuming_ren').iSelectTags();
/*
* 还可以传入参数调用
$('#test').iSelectTags({
name:'#test',
drop:$('.drop'),
...
});
*/
});
</script>
</body>
</html>