<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js">
</script>
<style>
.select{
100px;
height: 20px;
position: relative;
margin-top: 20px;
}
.select_show{
inherit;
height: inherit;
border: 1px solid gray;
}
.select_option{
inherit;
height: inherit;
border: 1px solid gray;
border-top: 0;
}
.select_option_container{
inherit;
display: none;
position: absolute;
z-index: 999;
}
</style>
</head>
<body>
<div class="select">
<div class="select_show">222</div>
<div class="select_option_container">
<div class="select_option">111</div>
<div class="select_option">222</div>
<div class="select_option">333</div>
</div>
</div>
<div class="select">
<div class="select_show">222</div>
<div class="select_option_container">
<div class="select_option">111</div>
<div class="select_option">222</div>
<div class="select_option">333</div>
</div>
</div>
<div class="select">
<div class="select_show">222</div>
<div class="select_option_container">
<div class="select_option">111</div>
<div class="select_option">222</div>
<div class="select_option">333</div>
</div>
</div>
<div class="select">
<div class="select_show">222</div>
<div class="select_option_container">
<div class="select_option">111</div>
<div class="select_option">222</div>
<div class="select_option">333</div>
</div>
</div>
<div class="select">
<div class="select_show">222</div>
<div class="select_option_container">
<div class="select_option">111</div>
<div class="select_option">222</div>
<div class="select_option">333</div>
</div>
</div>
<script>
$(".select_show").click(function(){
var optionContainerLeft=0;
var optionContainerTop=$(this).outerHeight();
$(this).closest(".select").find(".select_option_container").css("left",optionContainerLeft).css("top",optionContainerTop).show();
})
$(".select_option").click(function(){
$(this).closest(".select_option_container").hide();
$(this).closest(".select").find(".select_show").html($(this).html());
})
</script>
</body>
</html>