select without select

select without select

by Pavel Ogurtsov

HTML

SELECT без < select >

<div class="select" name="ANIMALS">
					<div class="select_selected">животное</div>
					<ul style="display: block;">
														<li><a href="#">Собаки</a></li>
															<li><a href="#">Кошки</a></li>
															<li><a href="#">Птицы</a></li>
															<li><a href="#">Рыбки</a></li>
															<li><a href="#">Другие животные</a></li>
															<li><a href="#">Хомячки</a></li>
															<li><a href="#">Хомяки</a></li>
															<li><a href="#">Грызуны</a></li>
															<li><a href="#">Рептилии</a></li>
												</ul>
				</div>

CSS

/*-------------------------*/
.select{
	margin: 4px 6px;
	background: url('/images/select_background.jpg') 1px 1px repeat-x;
}

.select .select_selected{
	border: 1px solid #B5B5B5;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	behavior: url(/pie/PIE.htc);	
	background: url('/images/select_arrow.jpg') right 8px no-repeat;
	height: 26px;
	color: #747474;
	line-height: 26px;
	padding: 0 8px;
	cursor: pointer;
}

.select ul{
	display: none;
	position: absolute;
	margin: -1px 3px;
	padding: 0px;
	list-style: none;
	border: 1px solid #B5B5B5;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	behavior: url(/pie/PIE.htc);
	background: #FFFFFF;
	z-index: 10;
}

.select ul li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.select ul li a{
	display: block;
	margin: 0px;
	padding: 6px 10px;
	height: 22px;
	color: #747474;
	line-height: 22px;	
	cursor: pointer;
	text-decoration: none;
}

.select ul li a:hover{
	background: #EEEEEE;
}

JavaScript

if($('.select').length){
	$('.select_selected').bind('click',function(){
		$('.select ul').slideUp(100);
		var ul=$(this).parent().find('ul');
		if(ul.is(':hidden')){
			ul.slideDown(100,function(){
				var count=ul.find('li').length;
				var li=ul.find('li');
				if(count>10){
					var h=li.height();
					ul.css({
						'height':(h*4)+'px',
						'overflow-y':'scroll'
					});
				}
			});
		} else {
   			ul.slideUp(100);
 		}
	});
	$('.select li a').click(function(e){
		$(this).parents('.select').find('.select_selected').html($(this).text()+'<input type="hidden" name="'+$(this).parents('.select').attr('name')+'" value="'+$(this).text()+'">');
		$(this).parents('ul').slideUp(100);
		return false;
	});
	$(document).click(function(e) {
    	if ($(e.target).closest(".select").length) return;
    	$('.select ul').slideUp(100);
    	e.stopPropagation();
  	});	
}