基于jquery实现的可编辑的下拉框

时间 2019-12-07

原文原文链接

最近作的一个小项目须要用到下拉框，但这个下拉框最好须要可编辑，网上找了几个都不太满意，本身动手改了一个，如今分享给你们。javascript

一、效果以下

二、使用方法

<!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=utf-8" />
<title>可编辑的下拉框</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.combox.js"></script>
<link rel="stylesheet" href="styles/style.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
	$('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>

<span id="combox"></span>
</body>
</html>

三、js源码

(function($){
		$.fn.combox = function(options) {
			var defaults = {  
                borderCss: "combox_border",  
                inputCss: "combox_input",  
                buttonCss: "combox_button",  
                selectCss: "combox_select",
				datas:[]
            };
            var options = $.extend(defaults, options);
			
			function _initBorder($border) {//初始化外框CSS
				$border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
				return $border;
			}
			
			function _initInput($border){//初始化输入框
				$border.append('<input type="text" class="'+options.inputCss+'"/>');
				$border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
				//绑定下拉特效
				$border.delegate('font', 'click', function() {
					var $ul = $border.children('ul');
					if($ul.css('display') == 'none') {
						$ul.slideDown('fast');
						$(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
					}else {
						$ul.slideUp('fast');
						$(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
					}					
				});
				return $border;//IE6须要返回值
			}
			
			function _initSelect($border) {//初始化下拉列表
				$border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
				var $ul = $border.children('ul');
				$ul.css('top',$border.height()+1);
				var length = options.datas.length;
				for(var i=0; i<length ;i++)
					$ul.append('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>');
				$ul.delegate('li', 'click', function() {
					$border.children(':text').val($(this).text());
					$ul.hide();
					$border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//肯定的时候要将下拉的icon改变
				});
				return $border;
			}
			this.each(function() {
				var _this = $(this);
				_this = _initBorder(_this);//初始化外框CSS
				_this = _initInput(_this);//初始化输入框
				_initSelect(_this);//初始化下拉列表
			});
		};
})(jQuery);

四、css源码

ul{list-style-type:none;margin:0;padding-left:0;}
li{margin:0;}

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-fl11l');
	src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
		url('fonts/icomoon.woff?-fl11l') format('woff'),
		url('fonts/icomoon.ttf?-fl11l') format('truetype'),
		url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*可根据本身的实际状况作修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}

五、完整源码下载

http://download.csdn.net/detail/feiyang123_/9578563css