Entrol,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
padding: 40px;
background-color: #B0C4DE;
}
.select_side {
display: inline-block;
min-width: 196px;
position: relative;
}
.select_side .select { background-color: #FFFFFF;
border: 1px solid #000;
position: relative;
height: 39px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
cursor: pointer;
padding: 0 47px 0 20px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select_side .select span {
font-size: 14px;
color: #2F2F2F;
line-height: 37px;
}
.select_side .drop {
position: absolute;
width: 100%;
top: 49px;
right: 0;
background: #FFF;
padding: 10px;
box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
-webkit-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
-moz-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
z-index: 200;
transform: scale(0) translate3d(0,-40px,0);
-webkit-transform: scale(0) translate3d(0,-40px,0);
-moz-transform: scale(0) translate3d(0,-40px,0);
-o-transform: scale(0) translate3d(0,-40px,0);
-ms-transform: scale(0) translate3d(0,-40px,0);
transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.select_side.opened .drop {
transform: scale(1) translate3d(0,0,0);
-webkit-transform: scale(1) translate3d(0,0,0);
-moz-transform: scale(1) translate3d(0,0,0);
-o-transform: scale(1) translate3d(0,0,0);
-ms-transform: scale(1) translate3d(0,0,0);
opacity: 1;
visibility: visible;
}
.select_side .drop:after, .select_side .drop:before {
bottom: 100%;
right: 13px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.select_side .drop:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 7px;
}
.select_side .drop:before {
border-color: rgba(228, 228, 228, 0);
border-bottom-color: #e4e4e4;
border-width: 8px;
margin-right: -1px;
}
.select_side .drop ul {
display: block;
max-height: 240px;
overflow-x: hidden;
border-top: 1px solid #F2F2F2;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.select_side .drop ul li {
display: block;
font-size: 14px;
cursor: pointer;
border-bottom: 1px solid #F2F2F2;
padding: 9px 10px 10px 10px;
}
.select_side .drop ul li:hover, .select_side .drop ul li.active {
background: #F6F6F6;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var side = $(".select_side");
side.each(function(i) {
var el = $(this),
select = el.find(".select"),
span = select.find("span"),
li = el.find("li");
select.click(function(event) {
side.not(side.eq(i).toggleClass("opened")).removeClass("opened")
});
li.click(function(event) {
li.removeClass('active')
span.html($(this).addClass('active').html());
el.removeClass("opened")
}).filter('.active').click()
});
$(document).on("click touchstart", function(e) {
if (!$(e.target).closest(side).length) side.removeClass("opened")
})
});
</script>
</head>
<body>
<div class="select_side">
<div class="select"><span>Выберите</span></div>
<div class="drop">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="select_side">
<div class="select"><span>Выберите 2</span></div>
<div class="drop">
<ul>
<li>44</li>
<li class="active">55</li>
<li>45</li>
</ul>
</div>
</div>
</body>
</html>
