jQuery是一款非常实用的JavaScript库，它可以帮助我们轻松快速地实现各种功能，其中之一便是模拟select选择框。下面我们来具体了解一下这个功能。

//HTML结构
<div id="selectBox" class="selectBox">
<div class="selectContent">
<span class="currentSelect">请选择</span>
<ul class="selectList">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
</div>
</div>
//CSS样式
.selectBox{
position:relative;
width:100px;
height:30px;
border:1px solid #ccc;
cursor:pointer;
}
.selectContent{
position:absolute;
top:30px;
left:0;
width:100%;
height:auto;
border:1px solid #ccc;
background:#fff;
display:none;
}
.currentSelect{
display:inline-block;
width:80%;
height:28px;
line-height:28px;
padding:0 10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.selectList{
list-style:none;
margin:0;
padding:0;
}
.selectList li{
width:100%;
height:30px;
line-height:30px;
padding:0 10px;
cursor:pointer;
background:#f0f0f0;
}
.selectList li.selected{
background:#e6f7ff;
}
//JS动态效果
$(function(){
//下拉框展开
$('.selectBox').click(function(){
$(this).find('.selectContent').slideDown();
});
//下拉框收起
$(document).click(function(){
$('.selectContent').slideUp();
$('.selectList li').removeClass('selected');
$('.currentSelect').text('请选择');
});
//选项选择
$('.selectList li').click(function(){
$('.selectList li').removeClass('selected');
$(this).addClass('selected');
var value=$(this).text();
$('.currentSelect').text(value);
});
});

通过上述代码，我们实现了一个div模拟select的功能。我们可以点击下拉框展开，选择一个选项后，下拉框会自动收起并显示我们选择的选项。